ansaurus

Question

Javascript onchange event preventing onsubmit event in HTML form?

Answer 1

+1 A:

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

Lauri Lehtinen 2009-01-28 21:50:35

Answer 2

+2 A:

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)

Nivas 2009-01-28 22:01:56

Answer 3

A:

It's quite interesting that the behaviour is different on the Mac, so it appears platform dependent and not browser dependent. Must be a clue there somewhere...

I tried onblur with Nivas' code but had the same result as with onchange (only the "Vali" alert).

What does make a difference is whether you do anything in validate(). Comment out the line alert("vali"); and it works! (The actual return value from validate() does not matter, although I wouldn't expect it to.)

EDIT: A colleague just tried this in Google Chrome on Windows and it works there. This intuitively makes sense because of how Chrome separates JS threads.

Something about the first alert() blocking the thread causes the onsubmit event to get lost. Possible race condition?

machinatus 2009-01-29 17:57:33

Answer 4

+2 A:

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

machinatus 2009-01-29 20:23:50

Answer 5

A:

Dnt create submit button instead create a normal button and. write a function which can be called onClick with that button.

Function will do the validation on the form fields and if everything is fine, it will submit the form other wise it will not.

function validate { "Piece of code to Validate your form" document.formName.action.value = "URL which you want to call" document.propFile.submit(); // It will submit he page }

2009-06-22 11:16:46

Answer 6

A:

If we use select option in a form submit and input type submit then this not work

but this work

2009-08-24 06:20:37

ansaurus

tags:

views:

answers:

Javascript onchange event preventing onsubmit event in HTML form?

related questions