Solved

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

Posted on 2009-04-11
11
1,161 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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 

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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Background What I'm presenting in this article is the result of 2 conditions in my work area: We have a SQL Server production environment but no development or test environment; andWe have an MS Access front end using tables in SQL Server but we a…
You can of course define an array to hold data that is of a particular type like an array of Strings to hold customer names or an array of Doubles to hold customer sales, but what do you do if you want to coordinate that data? This article describes…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
This lesson covers basic error handling code in Microsoft Excel using VBA. This is the first lesson in a 3-part series that uses code to loop through an Excel spreadsheet in VBA and then fix errors, taking advantage of error handling code. This l…

760 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

15 Experts available now in Live!

Get 1:1 Help Now