PDA

Click to See Complete Forum and Search --> : OnChange & Submit behaviour in Firefox

Tomcat
October 4th, 2006, 09:06 AM
Hi,

I'm using OnChange (JavaScript) to validate user input. If the entered value is incorrect I pop up an alert, restore the default value and return false to give the user a chance to correct the value without submitting the form.

This works fine in IE and Opera, but if I use Firefox (1.5.0.7) it only works if I leave the input field with tab or by clicking outside the control. If I click on Submit the alert is displayed, but at the same time the form is submitted!

Sample code:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function Validate(ctrl)
{
if("NaN" == "" + Number(ctrl.value) ||
Number(ctrl.value) < 0 ||
Number(ctrl.value) > 100)
{
alert("A number between 0 and 100 is required.");
ctrl.value = ctrl.defaultValue;
return false;
}

return true
}

</SCRIPT>
</HEAD>

<BODY>

<FORM ACTION="result.cgi" METHOD="POST" TARGET="_self">
Enter a number (0-100):
<INPUT TYPE="TEXT" SIZE=10 MAXLENGTH=10 VALUE=0
NAME="test" ONCHANGE="return Validate(this);">
<BR>
<INPUT TYPE="SUBMIT" VALUE="Sumbit">
</FORM>

</BODY>
</HTML>


I'm really not a web developer, so I have no idea if there are better ways to do this. What I do know is that I don't want to reload the page since this is an embedded application with limited resources (CPU/bandwidth), but fire away any ideas you might have.
PeejAvery
October 4th, 2006, 11:38 AM
I think the better way would be to use onsubmit and validate it only before submission. Try the following code.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function Validate(ctrl)
{
ctrl = document.getElementById(ctrl).value;
if("NaN" == "" + Number(ctrl.value) ||
Number(ctrl.value) < 0 ||
Number(ctrl.value) > 100)
{
alert("A number between 0 and 100 is required.");
ctrl.value = ctrl.defaultValue;
return false;
}

return true;
}

</SCRIPT>
</HEAD>

<BODY>

<FORM ACTION="result.cgi" METHOD="POST" TARGET="_self" onsubmit="return Validate('test');">
Enter a number (0-100):
<INPUT TYPE="TEXT" SIZE=10 MAXLENGTH=10 VALUE=0 NAME="test" id="test">
<BR>
<INPUT TYPE="SUBMIT" VALUE="Sumbit">
</FORM>

</BODY>
</HTML>
Tomcat
October 5th, 2006, 06:15 AM
That works better (thanks), but unfortunately I can't use it everywhere since we sometimes have other things in the same page that depend on the entered value.

If anyone has a workround (or at least explanation) for Firefox that would be preferable, since it would save me loads of work with existing stuff. :wave:
PeejAvery
October 5th, 2006, 08:05 AM
Then you really need to validate each text input. Create a custom JavaScript function referencing each one.
bigBA
October 6th, 2006, 02:48 AM
yes, onchange in firefox only fires on exiting the input field.

If you want an event which fires on every keystroke, just use onkeyup. onkeyup fires if the user releases a pressed key.

Note: onkeyup also fires if the input field has the focus and the user pressed ESC or any other key.

you just have to extend the event handler a little if you want to check the keycode, because you have to query the event itself for the keycode.



<script ...>
function handlerOnKeyUp( event, ctrl ) {

// Firefox gives you the event as function parameter
// IE not... IE gives you the event in window.event
if( !event ) {
event = window.event;
}

// get the keycode
var keyCode = event.keyCode;

...
}
</script>

<input ... onkeyup="handlerOnKeyUp(event,this)" />
Tomcat
October 8th, 2006, 10:01 AM
yes, onchange in firefox only fires on exiting the input field.

Which is exactly what I want, I just want it to fire before the Submit button.
PeejAvery
October 8th, 2006, 10:29 AM
Which is exactly what I want, I just want it to fire before the Submit button.
So you can do exactly as bigBA suggested, or you can create a custom validation function and call that onsubmit of the form. I would suggest the second personally but it isn't the only way.

<form onsubmit="return validateForm()">