Submit multiple forms only if checkbox is checked

Question

I try to submit multiple forms to different locations depending on the status of the checkboxes. A javascript should check the checkboxes and submit the forms but I cannot get it to work.

    <script type="text/javascript" charset="utf-8">
        function checkSubmit() {
            var frm1 = document.getElementById("optin1");
            var frm2 = document.getElementById("optin2");
            var frm3 = document.getElementById("optin3");
            var chkbox1 = document.getElementById("c1");
            var chkbox2 = document.getElementById("c2");
            var chkbox3 = document.getElementById("c3");
                if (chkbox1.checked === true) {
                    frm1.submit();
                        }
                else // it is not checked, dont submit form
                        {
                        return false;
                        }
                if (chkbox2.checked === true) {
                    frm2.submit();
                        }
                else // it is not checked, dont submit form
                        {
                        return false;
                        }
                if (chkbox3.checked === true) {
                    frm3.submit();
                        }
                else // it is not checked, dont submit form
                        {
                        return false;
                        }
setTimeout(function() {
window.location = 'http://url.com/index.php';
}, 1350);
    }
    </script>

here the html forms:

    <form id="optin1" name="f1" method="post" action="file1.php" target="iframe1">
    <input type="checkbox" id="c1" name="cc" value="" checked="checked">
    <label for="c1"><span></span><strong>YES, I'd love to join!</strong></label>
    <input name="email" type="hidden" value="<?=$_GET[email];?>"></form>

    <form id="optin2" name="f2" method="post" action="file2.php" target="iframe2">
    <input type="checkbox" id="c2" name="cc" value="" checked="checked">
    <label for="c2"><span></span><strong>YES, I'd love to join!</strong></label>
    <input name="email" type="hidden" value="<?=$_GET[email];?>">
    <input name="name" type="hidden" value="Newsletter"></form>

    <form id="optin3" name="f3" method="post" action="http://www.url.com" target="iframe3">
    <input type="checkbox" id="c3" name="cc" value="" checked="checked">
    <label for="c3"><span></span><strong>YES, I"d love to join!</strong></label>
    <input id="txtEmail1" class="field" name="txtEmail1" value="<?=$_GET[email];?>" type="hidden">
    <input type="hidden" value="18" name="webID">
    <input type="hidden" value="20" name="usd">
    <input type="hidden" value="25" name="lsvalue">
    <input type="hidden" value="http://url.com/thanks" name="thanxurl">
    <input type="hidden" value="http://url.com/confirm" name="confirmationurl"></form>
    <form name="Submit">
    <input name="btn1" type="image" onClick="checkSubmit()" src="images.jpg" align="left" /> 
    </form>
<iframe name="iframe1" style="display:none"></iframe>
<iframe name="iframe2" style="display:none"></iframe>
<iframe name="iframe3" style="display:none"></iframe>

When submitting the forms only the first form is getting submitted. What's wrong?

Answer 1

Simply returning false is not the way to prevent forms to be submitted in JavaScript. That's just one of the reasons why I'd never tell people to go off and use jQuery without understanding how JS events work. A very good site, to read up about JS events is good 'ol quirksmode .

When a jQuery handler you wrote returns false, the event is halted, and doesn't bubble or propagate any further. When you return false in native JS, the event still propagates, though, and its default behaviour is, in this case, to submit the form.
Check some articles on quirksmode for the full explanation, but for now, replace return false with:

var e = arguments[0] || window.event;//quirksmode will tell you what this means
//instead of return false:
if (e.preventDefault)
{
    e.preventDefault();//clue is in the method's name
    e.stopPropagation();
}
e.returnValue = false;//this is for IE<9
e.cancleBubble = true;
return false;

As you can see, you need to do a couple of things to stop forms from submitting. Of course, it's often said that a developer has to be "cleverly lazy" , so I often augment the Event.prototype and add a X-browser method to do this. I've added that code here , it's the accepted answer.

Update:
After looking into your fiddle, I've forked it after testing it on chromium , I found it working.
I do feel as though it'd be better if you would just wrap all checkboxes into one single form, and just submit that form: a checkbox that isn't checked won't be sent to the server. It still is the safest way: some people still disable JS.
What's more, your HTML looks as though it's meant to be a newsletter, ie sent by mail: be aware of the fact that you can't use JavaScript in an e-mail. Also, you've (accidentally) pasted a line of php code:

<? if ($_GET[email]) { ?>

You're using short-tags, perhaps you know this already, but the short tags are deprecated and will be removed somewhere in the near future, the only tags you can use are either the full <?php tag and the short echo-tag: <?= .

Anyway, In your case I'd write my html along the lines of:

<form method='POST' action='someScript.php'>
    <h3>George Hamilton: IM Newsletter for Professionals (AWEBER)</h3>
    <p>
        <a href="http://getfirefox.com/"><img src="images/man1.jpg" width="100" height="121" alt=""  class="float-left" /></a>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam,...
    </p>
    <p>
        <input type="checkbox" id="c1" name="cc" value="" checked="checked">
        <label for="c1">
            <span></span><strong>YES, I'd love to join!</strong>
        </label>
        <input name="email" type="hidden" value="<?=$_GET[email];?>">
    </p>
    <h3>Another checkbox</h3>
    <p>
        <a href="http://getfirefox.com/"><img src="images/man1.jpg" width="100" height="121" alt=""  class="float-left" /></a>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam,...
    </p>
    <p>
        <input type="checkbox" id="c2" name="cc2" value="" checked="checked">
        <label for="c2">
            <span></span><strong>YES, I'd love to join!</strong>
        </label>
    </p>
    <!-- @the end of the checkboxes -->
    <input type="submit" value="sumbit image" id="foobar"/>
</form>

In this case, there's no real need for a JS validation script at all. All checkboxes that are checked will be sent to the server. You'll have to make sure that their name attributes are unique, though... This approach has 2 major benefits: you don't have to include a hidden email field for each checkbox (one is enough, as we only have 1 form) and, as I said before, You don't have to rely on JS to submit the forms.

Answer 2

The main problem is your else conditions. If the first checkbox isn't checked then you return false , which will immediately exit from the function and result in the other if statements not executing at all.

You'll need to modify your code so that you only return if none of the checkboxes are checked (or just always return after those if statements, it probably wouldn't matter).

Answer 3

Your javascript function should be as follows :

    function checkSubmit() {
        var frm1 = document.getElementById("optin1");
        var frm2 = document.getElementById("optin2");
        var frm3 = document.getElementById("optin3");
        var chkbox1 = document.getElementById("c1");
        var chkbox2 = document.getElementById("c2");
        var chkbox3 = document.getElementById("c3");
            if (chkbox1.checked === true) {
               frm1.submit();
                    }

           else if (chkbox2.checked === true) {
              frm2.submit();
                    }

           else if (chkbox3.checked === true) {
              frm3.submit();
                    }
      else {
        return false;
      }   
  setTimeout(function() {
   window.location = 'http://url.com/index.php';
  }, 1350);
 }
}

Answer 4

尝试在Chrome / Firefox中执行url，然后从firebug进行调试。