mgmhicks
asked on
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
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" /> </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" >
</td>
</tr>
<tr>
<td colspan="4" bgcolor="#B39B5B">
Checking Account Holders Information:</td>
</tr>
<tr>
<td align="right" class="style9">
First Name:</td>
<td class="style8">
<asp:TextBox ID="txtFName" runat="server" Width="271px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server"
ControlToValidate="txtFName" ErrorMessage="*"></asp:RequiredFieldValidator>
</td>
<td class="style10">
</td>
<td class="style10">
</td>
</tr>
<tr>
<td align="right" class="style9">
Last Name: </td>
<td class="style8">
<asp:TextBox ID="txtLName" runat="server" Width="271px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server"
ControlToValidate="txtLName" ErrorMessage="*"></asp:RequiredFieldValidator>
</td>
<td class="style10">
</td>
<td class="style10">
</td>
</tr>
<tr>
<td align="right" class="style9">
Address : </td>
<td class="style8">
<asp:TextBox ID="txtAddress" runat="server" Width="271px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server"
ControlToValidate="txtAddress" ErrorMessage="*"></asp:RequiredFieldValidator>
</td>
<td class="style10">
</td>
<td class="style10">
</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">
</td>
<td class="style10">
</td>
</tr>
<tr>
<td align="right" class="style9">
City : </td>
<td class="style8">
<asp:TextBox ID="txtCity" runat="server" Width="271px"></asp:TextBox>
<asp:RequiredFieldValidator
ID="RequiredFieldValidator7" runat="server" ControlToValidate="txtCity"
ErrorMessage="*"></asp:RequiredFieldValidator>
</td>
<td class="style10">
</td>
<td class="style10">
</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>
<asp:RequiredFieldValidator
ID="RequiredFieldValidator8" runat="server" ControlToValidate="txtState"
ErrorMessage="*"></asp:RequiredFieldValidator>
</td>
<td class="style10">
</td>
<td class="style10">
</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>
<asp:RequiredFieldValidator
ID="RequiredFieldValidator9" runat="server" ControlToValidate="txtZip"
ErrorMessage="*"></asp:RequiredFieldValidator>
</td>
<td class="style10">
</td>
<td class="style10">
</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>
<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>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server"
ControlToValidate="txtAcctNo" ErrorMessage="*"></asp:RequiredFieldValidator>
</td>
<td >
</td>
<td >
</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>
<asp:RequiredFieldValidator
ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtRouteNo"
ErrorMessage="*"></asp:RequiredFieldValidator>
</td>
<td align="left" colspan="2" rowspan="2" valign="top" >
</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>
<asp:RangeValidator ID="RangeValidator2" runat="server"
ControlToValidate="txtPaymentAmt" ErrorMessage="*" MaximumValue="1500"
MinimumValue="20" Type="Currency"></asp:RangeValidator>
</td>
<td >
</td>
<td >
</td>
</tr>
<tr>
<td align="right" class="style13" >
Service Fee :</td>
<td class="style14" >
<asp:TextBox ID="txtCFee" runat="server"></asp:TextBox>
</td>
<td >
</td>
<td >
</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 >
</td>
<td >
</td>
</tr>
</table>
<table style="width: 100%" cellspacing="0" cellpadding="10">
<tr>
<td class="style6"></td>
<td> </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">
</p>
<p style="font-weight: 700; text-decoration: none; margin-top: 0px; margin-bottom: 0px">
</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
'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
And I didn't realize there was an "onTextChanged" event. Does that actually fire the event? I was only aware of onChange
ASKER
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.
Change this line:
<asp:TextBox ID="txtPaymentAmt" OnTextChanged="txtpaymenta
To:
<asp:TextBox ID="txtPaymentAmt" OnTextChanged="txtpaymenta
This way it will raise both events. I would, however, suggest renaming your "txtpaymentamt_txtchanged"
<asp:TextBox ID="txtPaymentAmt" OnTextChanged="txtpaymenta
To:
<asp:TextBox ID="txtPaymentAmt" OnTextChanged="txtpaymenta
This way it will raise both events. I would, however, suggest renaming your "txtpaymentamt_txtchanged"
ASKER
the textchanged event is a member of the textbox class. I will try to raise the other event and see what happens.
ASKER
onblur doesnt seem to be part of the control.
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.
ASKER
When I used the onblur it told me that txtpayment.textchanged is undefined. Yet in the code behind it exists. Any ideas.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
ASKER
thanks for all the information. Hopefully I will get it worked out.