Javascript onchange event preventing onsubmit event in HTML form?

javascript html validation onchange

24,037

Solution 1

Solution (of a sort):

It turns out that it is only presence of an alert() - or a confirm() - during the input's onchange event that causes the form's onsubmit event to not fire. The JS thread appears to get blocked by the alert().
The workaround is to not include any alert() or confirm() in the input's onchange call.

Browsers known to be affected:
IE6 - Windows
IE8 - Win
FF3 - Win

Browsers known not to be affected:
Google Chrome - Win
Safari - Mac
FF - Mac

Solution 2

I tried with Firefox 3 (Mac) with the following code:

    <html>
        <head>
            <script>
                function validate(ele)
                {
                    alert("vali");
                    return false;
                }

                function checkValidArray()
                {
                    alert("checkValidArray");
                }

            </script>
        </head>
        <body>
            <form action="" method="POST" onsubmit="return checkValidArray()">
                <input type="text" name="data" onchange="return validate(this);">
                <input type="submit" value="Ok">
            </form>
        </body>
</html>

It seems to work. When I click on the Ok button, both "Vali" and "Check Valid Array" pop up. Initially I thought return false could be the reason why the form was not submitted, but it IS submitted (at least, checkValidArray() is called).

Now, what are you doing in your checkValidArray() and validate() methods? Something special? Can you post the code?

EDIT: I tested with IE8 and FF3 on windows, and here both events do not get fired. I have no idea why. Perhaps onblur IS a solution, but WHY does onchange not work? Is there a specific reason or is it just another inconsistency? (Works on both FF and Safari on Mac)

Solution 3

You could use the onblur event in your inputs instead of onchange.

24,037

Author by

machinatus

Updated on July 22, 2022

Comments

machinatus almost 2 years
Consider an HTML form:
```
<form action="" method="POST" onsubmit="return checkValidArray()">
    <input type="text" name="data" onchange="return validate(this);">
</form>
```
It appears (in both IE 6 and Firefox 3) that when you type some text into the input field and click submit that the onchange event fires for the input field, but the onsubmit event does not fire for the form until you click the submit button a second time (at which time the onchange does not fire, of course). In other words, the onchange seems to prevent the onsubmit from firing.

The desire is to check each field in the form when the user exits the field in order to provide them with immediate validation feedback, and also to prevent submission of the form if there is invalid data.

[EDIT: Note that both validation functions contain an alert().]

How does one get around this problem?
Oroboros102 over 12 years

Look: stackoverflow.com/questions/8013282/… it was a problem with onsubmit event, which consists of two parts (like "onclick").