Verify at least one checkbox checked before submission

Question

I wish to check if at least one checkbox checked before submission of a form, here is my code:

<script type="text/javascript">
function validate() {
    if (document.getElementById('checking').checked) {
        alert("checked");
    } else {
        alert("You didn't check it! Let me check it for you.")
    }
}
</script>

<?php foreach (..... ) : ?>

<form name="frm1" id="frm1" method="post" action="next.php" >
...
<input type="checkbox" value="" class="chk"  id="checking"/>
...
 <a href="#" onclick="$(this).closest('form').submit(); validate();"  id="add_view" ><img src="/submit.png"></a>

....

</form>

I did like that but it seems dosn't work for me,I see the message but at the same time it make submission also that not enought to verify atleast one checkbox is checked?

Did you consider using the `form.onsubmit` event (http://stackoverflow.com/a/16262814/209103) and a regular HTML `button` for the button (http://stackoverflow.com/a/8488022/209103)? — Frank van Puffelen, Nov 09 '13 at 23:20

t0mppa · Answer 1 · 2013-11-10T00:26:08.597

Onclick is firing both events, the validation and the submit. You could put the submitting part inside the validation script for instance and only submit the form, if your validation was successful.

EDIT: posting a more complete code sample

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  </head>
  <body>
    <script type="text/javascript">
    function validate() {
      if ($('#checking').is(':checked')) {
        $('#frm1').submit();
      } else {
        alert("You didn't check it! Let me check it for you.");
        $('#checking').attr('checked', true);
      }
    }
    </script>

    <form name="frm1" id="frm1" method="post" action="next.php" >
      <input type="checkbox" value="" class="chk"  id="checking"/>
      <a href="#" onclick="validate(); return false;" id="add_view"><img src="/submit.png"></a>
    </form>
  </body>
</html>

Also, you should consider also adding server side validation, if none exist yet, since a user can easily change the HTML/JavaScript on your page on runtime with tools like FireBug for instance and submit data that's not valid anyway.

Fine, updated the snippet. This works on my browser, so if you have additional stuff on the page cluttering it up and causing issues, you need to update your question as well. — t0mppa, Nov 10 '13 at 00:17
Have you tried debugging the JS execution and seeing where it goes wrong? That is a very simple scenario. Does the id you're giving on JQuery actually match the checkbox? Does the checkbox claim it's not checked even when it's checked? Would you happen to have multiple checkboxes with same id (illegal in HTML), since you have that foreach structure in your original post? Like I said, the above (and nothing else) on a web page works perfectly well on my end, so very hard to tell what's wrong, if you have additional code surrounding the details that you're not willing to share. — t0mppa, Nov 11 '13 at 06:15

mr rogers · Answer 2 · 2013-11-09T23:18:35.563

I'd suggested in my original answer that you'd need "something like ...".

Here is what should be a full working solution. The trick that needed to be added was that validate should return a true/false so that we can decide whether or not to submit the form.

<script type="text/javascript">
  function validate() {
    if (document.getElementById('checking').checked) {
      alert("checked");
      return true;
    } else {
      alert("You didn't check it! Let me check it for you.")
      return false;
    }
  }
</script>


<form name="frm1" id="frm1" method="post" action="next.php" >
  <input type="checkbox" value="" class="chk"  id="checking"/>
  <a href="#" onclick="if(validate()) { $(this).closest('form').submit(); } return false;"  id="add_view" ><img src="/submit.png"></a>
</form>

Original Answer: You probably need something in your click handler that is more like

if (validate()) { $(this).closest('form').submit(); }

This should make the submission wait until the alert is closed. If you want the form to not submit if the checkbox thing didn't happen, then you could return true/false from validate() and the same would work.

Verify at least one checkbox checked before submission

2 Answers2