Solved

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

Posted on 2009-04-11
11
1,162 Views
Last Modified: 2013-12-26
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
Comment
Question by:mgmhicks
  • 6
  • 5
11 Comments
 
LVL 5

Expert Comment

by:brandonvmoore
ID: 24123872
'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
 
LVL 5

Expert Comment

by:brandonvmoore
ID: 24123875
And I didn't realize there was an "onTextChanged" event.  Does that actually fire the event?  I was only aware of onChange
0
 

Author Comment

by:mgmhicks
ID: 24123884
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
 
LVL 5

Expert Comment

by:brandonvmoore
ID: 24123933
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
 

Author Comment

by:mgmhicks
ID: 24123987
the textchanged event is a member of the textbox class.  I will try to raise the other event and see what happens.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:mgmhicks
ID: 24123994
onblur doesnt seem to be part of the control.
0
 
LVL 5

Expert Comment

by:brandonvmoore
ID: 24123999
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
 

Author Comment

by:mgmhicks
ID: 24124009
When I used the onblur it told me that txtpayment.textchanged is undefined.  Yet in the code behind it exists.  Any ideas.

0
 
LVL 5

Accepted Solution

by:
brandonvmoore earned 500 total points
ID: 24124086
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
 
LVL 5

Expert Comment

by:brandonvmoore
ID: 24124092
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
 

Author Closing Comment

by:mgmhicks
ID: 31569238
thanks for all the information.  Hopefully I will get it worked out.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article describes some techniques which will make your VBA or Visual Basic Classic code easier to understand and maintain, whether by you, your replacement, or another Experts-Exchange expert.
Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
Get people started with the utilization of class modules. Class modules can be a powerful tool in Microsoft Access. They allow you to create self-contained objects that encapsulate functionality. They can easily hide the complexity of a process from…
Show developers how to use a criteria form to limit the data that appears on an Access report. It is a common requirement that users can specify the criteria for a report at runtime. The easiest way to accomplish this is using a criteria form that a…

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now