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?

score 1 · Answer 1 · edited May 23 '17 at 10:24

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.

something like this? else if (chkbox5.checked === true) { frm5.submit(); } else { 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; — mickzee, Jan 22 '13 at 13:14
@mickzee: I think it best you put together [a fiddle](http://jsfiddle.net), because code in a comment is just illegible — Elias Van Ootegem, Jan 22 '13 at 13:42
thanks for your answer. You can check the fiddle here: http://jsfiddle.net/MacQV/ — mickzee, Jan 22 '13 at 14:48
@mickzee: I had a look at your fiddle, forked it and added a link in my answer. However, I would suggest a different approach all together, so I've updated my answer. — Elias Van Ootegem, Jan 23 '13 at 07:48
hey Elias, thanks a lot for your answer and your work. Appreciate that very much. Regarding the update I think it would be better for me to use your forked version than the single form solution because I need to send the forms to different scripts and url's. I'm not that good in programming to develop another script that is able to catch the form data and send that to the targets. :-/ Anyway thank you very much for your help. I will test the script now and keep you updated. ;) — mickzee, Jan 23 '13 at 10:46
oh I forgot, this will not be used as a newsletter. The user can decide which newsletter is interesting for him and submitting these forms will insert their email address (captured a page before) to lists at aweber, getresponse and some others. Btw. where should I insert the link to the thank you page? As another action inside of the submit form? — mickzee, Jan 23 '13 at 11:14
@mickzee: the action page should be the thank you page, or use the headers to redirect the user. If this isn't the newsletter itself, I still maintain you should use a single form and let the action script deal with the data submitted by the user... — Elias Van Ootegem, Jan 23 '13 at 20:03
I'm sorry Elias but I dont understand how this can work. If form 1 is submitted to sendmail.php and form 2 to an external url and so on, how can I use a single form with only one target? Do I need a special action script that is getting the data from the form and submits these to their targets? — mickzee, Jan 23 '13 at 20:23
what I'm trying to get is something like this: http://www.clickz.com/static/newsletters — mickzee, Jan 23 '13 at 20:28
@mickzee: ok, I missed the comment about your trying to send the responses to various scripts. You should look into either using _ajax_, to send the form data to each processing script _or_ send one form to a single script that passes the data to whichever script needs to process the data. Either way, simply `submit`-ing a form will cause your page to be refreshed, so you'll never send all 5 forms with your current code. As soon as 1 form is submitted, the client leaves the page — Elias Van Ootegem, Jan 24 '13 at 13:43

Anthony Grist · Answer 2 · 2013-01-22T11:49:05.633

0

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).

edited Jan 22 '13 at 11:49

answered Jan 22 '13 at 11:43

Anthony Grist

38,173
8
62
76

score 0 · Answer 3 · answered Jan 22 '13 at 11:51

0

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);
 }
}

answered Jan 22 '13 at 11:51

imVJ

424
4
16

This is same as your javascript code.. only change i've made is removed your `else` conditions you have written after every `if`. In your case, if fist checkbox is not checked, its executing first else loop and because of `return false` execution of further script is stopped. – imVJ Jan 22 '13 at 11:59
Changed it as you mentioned but doesnt work either. I'm using a sendmail script where the forms are submitted to but no email is sent. – mickzee Jan 22 '13 at 13:07
There might be something wrong in file1.php. Try debugging in file1.php before and after your **sendmail code** – imVJ Jan 24 '13 at 08:59

score 0 · Answer 4 · answered Jan 22 '13 at 12:05

0

try executing the url in Chrome/Firefox and debug from firebug.

answered Jan 22 '13 at 12:05

minil

6,895
16
48
55

Submit multiple forms only if checkbox is checked

4 Answers4