Using onchange in HTML

Printable View

Jun 13th, 2012, 09:07 AM
jmsrickland

Using onchange in HTML

In the below HTML code I have a onchange="myFunction(event)" and I have a function called myFunction

My first question is what does the word event mean in the function call and my second question is what is the argument that I need in the function argument list.

Code:

<html> <body> <input type="text" name="MyTextbox" size="40" value="" maxlength="160" onchange="myFunction(event)"> <script language=javascript> function myFunction(what_goes_here?) { // // how to process the argument? // } </script> </body> </html>
Jun 14th, 2012, 11:40 PM
akhileshbc

Re: Using onchange in HTML

onChange is the event here. That is when the text in the inputbox is changed, the onChange event is fired.

If you pass "this" as parameter, then it refers to that element itself. Then you can access it in the function.

Here's an example:

HTML Code:

<html> <body> <input type="text" name="MyTextbox" size="40" value="" maxlength="160" onchange="myFunction(this)" /> <script language="javascript"> function myFunction(ele) { alert(ele.value); } </script> </body> </html>

To test it live: http://jsfiddle.net/wrFUD/
Type something in the box, and click somewhere outside the box. You'll get an alert box with the content of the inputbox.

:wave:
Jun 15th, 2012, 12:31 AM
jmsrickland

Re: Using onchange in HTML

I already know about passing this but that is not what my problem is. The call passes event. That is what I am dealing with not this .
Jun 15th, 2012, 12:37 AM
akhileshbc

Re: Using onchange in HTML

I believe it addresses that event (in your case the change event).

You could check that by alerting variablename.type

Example:

Code:

<input type="text" name="MyTextbox" size="40" value="" maxlength="160" onchange="myFunction(event)" /> <script language="javascript"> function myFunction(ele) { alert(ele.type); } </script>

:wave:
Dec 6th, 2012, 04:02 AM
carvermediagroup

Re: Using onchange in HTML

The onChange happens whenever anything changes the value of the field, not just when the user enters a value. If a field's onChange changes the value of the field, it's easy to get an endless loop. In situations like this, be sure to check if the change needs to happen. For example, this product order form makes sure that the "total" field is always the correct total (even if the user changes it). The subtotal field "vn_stVis" uses onChange to check if it is different than the hidden subtotal field "vn_stHold". If there is a difference, vn_stVis is reset, which then causes another onChange event. However, that second time around the two fields are the same, and the script ends.