Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1178
  • Last Modified:

How to get text box to fire on text changed event.

I have been working on this now for 2 straight days and have come up blank in all respects.  I have to following web page as well as a code behind page.  What I am trying to accomplish is that whenever the user leaves the payment text box it calculates the boxes and updates the totalpayments textbox with the total to pay.  Others have given me javascripts, but vb doesnt seem to recognize them, and I cant get the textbox_textchanged event to even fire, or not fire and run the java script.  I have done this all ways.  Please someone help me.  I'm exhausted.

thanks


web page code
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Resident_CHK.aspx.vb" Inherits="Resident_CHK" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head >
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>The Apartment Gallery</title>
 
 
 
<style type="text/css">
a {
	color: #CC0000;
	}
a {
	color: #CC0000;
 
}
a {
	color: #0000FF;
	text-align: center;
}
body {
	background: #000000 url('../../Newweb/images/Background/bg.jpg') repeat-x fixed left 50%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
}
body {
	margin: 0;
	padding: 0;
	border: 0;
}
body {
	background: #000000 url('../../images/Background/bg.jpg') repeat-x fixed left 50%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
}
body {
	margin: 0;
	padding: 0;
	border: 0;
}
body {
	background: #000000 url('../../images/Background/bg.jpg') repeat-x fixed left 50%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
}
#tech {
	float: none;
	width: 505px;
	margin-left: 0px;
	text-align: center;
	height: 295px;
	margin-right: 0px;
}
#tech1 {
	height: 169px;
	width: 290px;
	float: left;
	text-align: center;
}
.style4 {
	background-color: #FFFFFF;
}
.style2 {
	border: 20px solid #000000;
	background-image: url('');
	background-color: #EAE9CE;
}
.style5 {
	text-align: center;
}
    .style6
    {
        width: 385px;
    }
    .style7
    {
        width: 780px;
    }
    .style8
    {
        width: 361px;
        font-size: medium;
    }
    .style9
    {
        width: 573px;
    }
    .style10
    {
        width: 114px;
        margin-bottom: 0px;
    }
    .style12
    {
        width: 363px;
    }
    .style13
    {
        width: 313px;
    }
    .style14
    {
        width: 290px;
    }
    .style15
    {
        width: 311px;
    }
    .style16
    {
        height: 37px;
    }
</style>
</head>
 
<body style="background-color: #DAD5A7; background-image: url('../../images/Background/bg234567.jpg'); background-repeat: repeat-x; background-position: center; margin-bottom: 50px; margin-top: 20px">
 
 
    <form id="resident_chk" runat="server"  submitdisabledcontrols="False">
 
 
<table style="width: 845px" class="style4" cellspacing="0" cellpadding="7" align="center">
	<tr>
		<td>
 
 
<table style="width: 840px; height: 100px; background-attachment: inherit; background-repeat: repeat-y;" align="center" cellspacing="0" cellpadding="0" class="style2">
	<tbody class="style5"></tbody>
	<tr>
		<th style="text-align: center; background-color: #000000; white-space: nowrap;">
		<p>
		<img src="../../images/Top%20of%20the%20Page%20Banner/APTGALL-header-black2.jpg" width="549" height="73" />&nbsp;</p>
		</th>
	</tr>
	<tr>
	<td><div id="macro-style_id" ></div>
	<script  language="javascript" type ="text/javascript">
function Add()
    {
    var x = CurrencyFormatted(document.getElementById('txtPayAmt').value);
    var y = CurrencyFormatted(document.getElementById('txtCFee').value);
    var z = CurrencyFormatted(document.getElementById('txtTotalCharge').value);
    z.value=parseInt(x.value) + parseInt(y.value); 
    }
 
    function CurrencyFormatted(amount)
    {
	var i = parseFloat(amount);
	if(isNaN(i)) { i = 0.00; }
	var minus = '';
	if(i < 0) { minus = '-'; }
	i = Math.abs(i);
	i = parseInt((i + .005) * 100);
	i = i / 100;
	s = new String(i);
	if(s.indexOf('.') < 0) { s += '.00'; }
	if(s.indexOf('.') == (s.length - 2)) { s += '0'; }
	s = minus + s;
	return s;
    }
 
</script>
<script language = "javascript" type ="text/javascript" src="flashobject.js">
var fo = new FlashObject("http://localhost/memberships/Flash/Menu3.swf","macro-style","840","65","6","#928047");
    fo.addParam("menu","false");
    fo.addParam("quality","best");
    fo.addParam("salign","LT");
    fo.addParam("scale","noscale");
    fo.addParam("wmode","window");
    fo.write("macro-style_id");
</script>
		<table style="width: 100%" cellspacing="0" cellpadding="10">
			<tr>
		<td style="text-align: left">
 
<p style="font-weight: 700; text-decoration: none; margin-top: 0px; margin-bottom: 0px" 
                class="style5">
 
            <span class="style8" lang="en-us">Resident eCheck Transaction</span></p>
		    <table cellspacing="5" class="style7" align="center" >
                <tr>
                    <td colspan="4" >
                        &nbsp;</td>
                </tr>
                <tr>
                    <td colspan="4" bgcolor="#B39B5B">
                        Checking Account Holders Information:</td>
                </tr>
                <tr>
                    <td align="right" class="style9">
                        &nbsp;&nbsp;&nbsp; First Name:</td>
                    <td class="style8">
                        <asp:TextBox ID="txtFName" runat="server" Width="271px"></asp:TextBox>
                        &nbsp;<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" 
                            ControlToValidate="txtFName" ErrorMessage="*"></asp:RequiredFieldValidator>
                    </td>
                    <td class="style10">
                        &nbsp;</td>
                    <td class="style10">
                        &nbsp;</td>
                </tr>
                <tr>
                    <td align="right" class="style9">
                        Last Name: </td>
                    <td class="style8">
                        <asp:TextBox ID="txtLName" runat="server" Width="271px"></asp:TextBox>
                        &nbsp;<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" 
                            ControlToValidate="txtLName" ErrorMessage="*"></asp:RequiredFieldValidator>
                    </td>
                    <td class="style10">
                        &nbsp;</td>
                    <td class="style10">
                        &nbsp;</td>
                </tr>
                <tr>
                    <td align="right" class="style9">
                        Address : </td>
                    <td class="style8">
                        <asp:TextBox ID="txtAddress" runat="server" Width="271px"></asp:TextBox>
                        &nbsp;<asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" 
                            ControlToValidate="txtAddress" ErrorMessage="*"></asp:RequiredFieldValidator>
                    </td>
                    <td class="style10">
                        &nbsp;</td>
                    <td class="style10">
                        &nbsp;</td>
                </tr>
                <tr>
                    <td align="right" class="style9">
                        Address2 : </td>
                    <td class="style8">
                        <asp:TextBox ID="txtAddress2" runat="server" Width="271px"></asp:TextBox>
                    </td>
                    <td class="style10">
                        &nbsp;</td>
                    <td class="style10">
                        &nbsp;</td>
                </tr>
                <tr>
                    <td align="right" class="style9">
                        City : </td>
                    <td class="style8">
                        <asp:TextBox ID="txtCity" runat="server" Width="271px"></asp:TextBox>
                                                    &nbsp;<asp:RequiredFieldValidator 
                            ID="RequiredFieldValidator7" runat="server" ControlToValidate="txtCity" 
                            ErrorMessage="*"></asp:RequiredFieldValidator>
                                                    </td>
                    <td class="style10">
                        &nbsp;</td>
                    <td class="style10">
                        &nbsp;</td>
                </tr>
                <tr>
                    <td align="right" class="style9">
                        State : </td>
                    <td class="style8">
                        <asp:TextBox ID="txtState" runat="server" Width="74px" MaxLength="2"></asp:TextBox>
                                                    &nbsp;<asp:RequiredFieldValidator 
                            ID="RequiredFieldValidator8" runat="server" ControlToValidate="txtState" 
                            ErrorMessage="*"></asp:RequiredFieldValidator>
                                                    </td>
                    <td class="style10">
                        &nbsp;</td>
                    <td class="style10">
                        &nbsp;</td>
                </tr>
                <tr>
                    <td align="right" class="style9">
                        Zip : </td>
                    <td class="style8">
                        <asp:TextBox ID="txtZip" runat="server" Width="74px" MaxLength="5"></asp:TextBox>
                                                    &nbsp;<asp:RequiredFieldValidator 
                            ID="RequiredFieldValidator9" runat="server" ControlToValidate="txtZip" 
                            ErrorMessage="*"></asp:RequiredFieldValidator>
                                                    </td>
                    <td class="style10">
                        &nbsp;</td>
                    <td class="style10">
                        &nbsp;</td>
                </tr>
            </table>
            <table cellspacing="5" class="style7" align="center" >
            <tr>
                    <td colspan="4" bgcolor="#B39B5B">
                        Check Card Information:</td>
                </tr>
            <tr>
                    <td align="right" class="style15" >
                        Account Type :</td>
                    <td class="style12" >
                        <asp:DropDownList ID="ddChkType" runat="server">
                            <asp:ListItem Selected="True" Value="0" meta:resourcekey="ListItemResource1">Account Type</asp:ListItem>
                            <asp:ListItem Value="1" meta:resourcekey="ListItemResource2">Checking</asp:ListItem>
                            <asp:ListItem Value="2" meta:resourcekey="ListItemResource3">Savings</asp:ListItem>
                        </asp:DropDownList>
                        &nbsp;<asp:RangeValidator ID="RangeValidator1" runat="server" 
                            ControlToValidate="ddChkType" ErrorMessage="*" MaximumValue="2" 
                            MinimumValue="1"></asp:RangeValidator>
                        </td>
                    <td >
                        </td>
                    <td >
                        </td>
                </tr>
            <tr>
                    <td align="right" class="style15" >
                        Account Number :</td>
                    <td class="style12" >
                        <asp:TextBox ID="txtAcctNo" runat="server" Width="271px"></asp:TextBox>
                        &nbsp;<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" 
                            ControlToValidate="txtAcctNo" ErrorMessage="*"></asp:RequiredFieldValidator>
                        </td>
                    <td >
                        &nbsp;</td>
                    <td >
                        &nbsp;</td>
                </tr>
            <tr>
                    <td align="right" class="style15" >
                        Routing Number :</td>
                    <td class="style12" >
                        <asp:TextBox ID="txtRouteNo" runat="server" Width="83px" MaxLength="9"></asp:TextBox>
                                                    &nbsp;<asp:RequiredFieldValidator 
                            ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtRouteNo" 
                            ErrorMessage="*"></asp:RequiredFieldValidator>
                                                    </td>
                    <td align="left" colspan="2" rowspan="2" valign="top" >
                        &nbsp;</td>
                </tr>
            <tr>
                    <td align="center" class="style16" colspan="2" >
                        <asp:LinkButton ID="LinkButton1" runat="server">Show me a example</asp:LinkButton>
                    </td>
                </tr>
            </table>
            <table cellspacing="5" class="style7" align="center" >
            <tr>
                    <td colspan="4" bgcolor="#B39B5B">
                        Charge Information:</td>
                </tr>
           
            <tr>
                    <td align="right" class="style13" >
                        Pay Amount :</td>
                    <td class="style14" >
                        <asp:TextBox ID="txtPaymentAmt" OnTextChanged="txtpaymentamt_textchanged" runat="server" AutoCompleteType="Disabled"></asp:TextBox>
                        &nbsp;
                        <asp:RangeValidator ID="RangeValidator2" runat="server" 
                            ControlToValidate="txtPaymentAmt" ErrorMessage="*" MaximumValue="1500" 
                            MinimumValue="20" Type="Currency"></asp:RangeValidator>
                    </td>
                    <td >
                        &nbsp;</td>
                    <td >
                        &nbsp;</td>
                </tr>
           
            <tr>
                    <td align="right" class="style13" >
                        Service Fee :</td>
                    <td class="style14" >
                        <asp:TextBox ID="txtCFee" runat="server"></asp:TextBox>
                                                    </td>
                    <td >
                        &nbsp;</td>
                    <td >
                        &nbsp;</td>
                </tr>
                       <tr>
                    <td class="style13" align="right" >
                        Total Charge on Card :</td>
                    <td class="style14" >
                        <asp:TextBox ID="txtTotalCharge" runat="server" CssClass="style10" 
                            Width="126px"></asp:TextBox>
                                                    </td>
                    <td >
                        &nbsp;</td>
                    <td >
                        &nbsp;</td>
                </tr>
           
            </table>
            
            
<table style="width: 100%" cellspacing="0" cellpadding="10">
	<tr>
		<td class="style6"></td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td align="right" class="style6">
            <asp:Button ID="btnCancel" runat="server" Text="Cancel" 
                CausesValidation="False" PostBackUrl="~/MemberPages/Resident_Main.aspx" />
        </td>
		<td>
            <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
        </td>
	</tr>
</table>
<p style="font-weight: 700; text-decoration: none; margin-top: 0px; margin-bottom: 0px">
		&nbsp;</p>
<p style="font-weight: 700; text-decoration: none; margin-top: 0px; margin-bottom: 0px">
		&nbsp;</p>
		</td>
			</tr>
			</table>
		</td>
	</tr>
	<tr>
	<td>
		</td>
	</tr>
	<tr>
	<td>
		</td>
	</tr>
	<tr>
		<td style="text-align: center;">
		    ________________________________________________________________________________y<br />
		    1 Waterford Professional Center | York, Pennsylvania | United States | 17402<br />
		    Site Designed By:<br />
		<a href="http://www.theapartmentgallery.com">MGM Enterprises Inc.</a><br />
		<img src="../../images/Misc/newfheo.bmp" width="39" height="34" /><br />
		    Fair Housing and Equal Opportunity<br />
		<br />
		</td>
	</tr>
</table>
 
 
 
		</td>
	</tr>
</table>
 
 
 
 
 
 
 
 
    </form>
 
 
</body>
</html>
 
 
VB Code behind
 
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        txtA.Attributes.Add("onblur", "javascript:add()")
        txtB.Attributes.Add("onblur", "javascript:add()")
End Sub
 
Protected Sub txtPayAmt_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles txtPayAmt.TextChanged
        txtPayAmt.Attributes.Add("onblur", "jscript:add()")
        txtCFee.Attributes.Add("onblur", "javascript:add();")
    End Sub

Open in new window

0
mgmhicks
Asked:
mgmhicks
  • 6
  • 5
1 Solution
 
brandonvmooreCommented:
'leaving' the text box and 'changing' the text box are two different events.  ontextchanged is only going to fire an event if the text is changed.  I think the event you're looking for is called onBlur
0
 
brandonvmooreCommented:
And I didn't realize there was an "onTextChanged" event.  Does that actually fire the event?  I was only aware of onChange
0
 
mgmhicksAuthor Commented:
Yea that is the only event I see is the onTextChanged on the html side and textbox.textchanged on the vb side.  Where do I use the onblur if you look at the code that was given me I do use onblur but the textbox itself doesnt raise this event.

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
brandonvmooreCommented:
Change this line:

<asp:TextBox ID="txtPaymentAmt" OnTextChanged="txtpaymentamt_textchanged" runat="server" AutoCompleteType="Disabled"></asp:TextBox>

To:

<asp:TextBox ID="txtPaymentAmt" OnTextChanged="txtpaymentamt_textchanged" OnBlur="txtpaymentamt_textchanged" runat="server" AutoCompleteType="Disabled"></asp:TextBox>

This way it will raise both events.  I would, however, suggest renaming your "txtpaymentamt_txtchanged" to something more appropriate though since it's not specific to that event.
0
 
mgmhicksAuthor Commented:
the textchanged event is a member of the textbox class.  I will try to raise the other event and see what happens.
0
 
mgmhicksAuthor Commented:
onblur doesnt seem to be part of the control.
0
 
brandonvmooreCommented:
OK.  You probably already know this, but just in case: VBscript only works for IE browsers.  If you want this to work on other browsers as well you will need to use javascript.
0
 
mgmhicksAuthor Commented:
When I used the onblur it told me that txtpayment.textchanged is undefined.  Yet in the code behind it exists.  Any ideas.

0
 
brandonvmooreCommented:
OK, my brain wasn't 100% working earlier...

If you are going to put the code into a server side function in asp (in the code behind), then you don't have to make that modification I mentioned.  In fact, you don't have to do anything further.  However, it won't work the way you are expecting because the server side code only gets run when new requests are made.  The submit button sends a request for a new page, however modifying or leaving the text box does not.

You will need to do the calculations on the clientside with either vbscript or javascript.  I recommend javascript b/c it works with all browsers.  I could go into great detail about how to accomplish exactly what you're wanting, but it would probably be better for you to go to w3schools and read their tutorials as they explain it more concisely than I probably would.  Just scan through the tutorials on javascript, read the relevant sections and skip the others for now if you want.

If you absolutely had to do the calculations on the serverside (for example, maybe there is something proprietary about the calculations that you can't let other people see), then you would have two options.  You could use AJAX (again, great tutorials on this at w3schools.com), or you could write a javascript function to go ahead and resubmit the page on each event that is fired.  AJAX would work just fine, but the other method is not a good one as it requires the page to reload every single time the user types into the textbox.
0
 
brandonvmooreCommented:
Oh, upon reading the bottom of your code again I see that maybe you are trying to do this in a different way that I am familiar with.  But if you read those tutorials you'll see an easy way to do it.
0
 
mgmhicksAuthor Commented:
thanks for all the information.  Hopefully I will get it worked out.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now