javascript change form onsubmit dynamically

Question

I have a form with some action and onsubmit values, which is submitted through a submit input tag. The problem is that it should be submittable by two buttons, so I wrote a function for the second button to change the action and onsubmit values of the form:

<a href="javascript:submitCompare()" class="submit">Compare</a>

function submitCompare()
{
    document.myForm.action = "anotherAction.php";
    document.myForm.onsubmit = function() {return countChecked()};
    document.myForm.submit();
}

function countChecked()
{
  var n = $(".reports input:checked").length;
  if (n >= 3 ) {
    alert ('You must select less than 3 reports.');
    return false;
  }
  else return true;
}

After clicking on the Compare link it sends me to the anotherAction.php page correctly, but even when I have more than 2 selected checkboxes (which is the validation rule). Can somebody help me make the onsubmit function work correctly?

Just a side-note, I think `(n > 2)` is enough instead of `(n >= 3)` — codingbiz, Jul 06 '12 at 18:56

Trevor · Answer 1 · 2012-07-06T19:00:16.427

6

document.myForm.onsubmit = function() {return countChecked()};

should be

document.myForm.onsubmit = function( e ) {
   e = e || window.event;
   if ( !countChecked() ) {
       e.preventDefault();
       e.returnValue = false;
   }
};

Returning false on a submit will just end any further function execution. You want to preventDefault submission behavior if you don't want it to submit.

edited Jul 06 '12 at 19:00

answered Jul 06 '12 at 18:52

Trevor

11,269
2
33
40

Tried it, but there was no change in the behaviour of the submit process. – user1507558 Jul 06 '12 at 19:00
Perhaps it is your countChecked function. try doing some console.log to see if it is getting the right amount of checked checkboxes – Trevor Jul 06 '12 at 19:01
countChecked() returned correct values. I really don't know why your solution didn't work but @Otto Allmendinger got it right for me, so case closed :) – user1507558 Jul 06 '12 at 19:04

score 4 · Answer 2 · answered Aug 09 '14 at 14:42

4

It is a late reply, but if someone else is looking at this...

instead of:

document.myForm.onsubmit = function() {return countChecked()};

I think you wanted:

document.myForm.setAttribute("onsubmit", "return countChecked()");

answered Aug 09 '14 at 14:42

Vlad

820
10
29

You saved my valuable last minute time – FatherMathew Apr 29 '17 at 14:53

score 1 · Accepted Answer · answered Jul 06 '12 at 18:53

1

In submitCompare(), you explicitly and unconditionally call

 document.myForm.submit();

What you probably want instead there is

 if (countChecked()) {
   document.myForm.submit();
 }

answered Jul 06 '12 at 18:53

Otto Allmendinger

27,448
7
68
79

Thanks a lot, that way it simplifies the whole idea and actually works! – user1507558 Jul 06 '12 at 19:01

javascript change form onsubmit dynamically

3 Answers3

Linked