Submit form only if at least one checkbox is checked using javascript

Question

I have the following form: https://expogr.com/bankexpokenya/advertise.php

I am filling the details of the form and clicking on the submit button. If I have not checked one checkbox, it gives me a message saying "please select any one checkbox" along with the ok button. After clicking the ok button, the form is getting submitted. For form submission, I have used email method so the form data is sent to the particular emailids.

I have tried the following code:

$(document).ready(function(){
    $("form").submit(function(){
        if ($('input:checkbox').filter(':checked').length < 1){
            alert("Please select at least one option from above!");
            break;
            return false;
        }
    });
});

But its not working.

$(document).ready(function(){
    $("form").submit(function(){
        if ($('input:checkbox').filter(':checked').length < 1){
            alert("Please select at least one option from above!");
            break;
            return false;
        }
    });
});

I'm not seeing a question or problem description here. What is the difference between these two code samples? Which one are you using? How is it failing? — David
– David, Commented Apr 22, 2019 at 11:52
break does nothing except inside a loop, so it shouldn't be there. The return false should be working though. — Robin Zigmond
– Robin Zigmond, Commented Apr 22, 2019 at 11:54
@RobinZigmond..i tried using e.preventDefault();....after using that also form is getting submitted from back.. — chetan
– chetan, Commented Apr 22, 2019 at 11:55
Please try with ctrl+f5 and check. I have tested your link and its working as expected. Code also seems correct. Just break; doesn't do anything. It should be removed. — Karan
– Karan, Commented Apr 22, 2019 at 11:56

Mamun · Accepted Answer · 2019-04-22 12:04:34Z

The issue is with the break statement, remove that and your code will work as expected. Also, you do not need to use .filter() separately as you can specify :checked as part of the selector:

$(document).ready(function(){
  $("form").submit(function(){
    if ($('input:checkbox:checked').length < 1){
      alert("Please select at least one option from above!");
      return false;
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="checkbox"/>First
  <input type="checkbox"/>Second
  <input type="submit" value="Submit"/>
</form>

You can also try with Event.preventDefault():

$(document).ready(function(){
  $("form").submit(function(e){
    if ($('input:checkbox:checked').length < 1){
      alert("Please select at least one option from above!");
      e.preventDefault();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="checkbox"/>First
  <input type="checkbox"/>Second
  <input type="submit" value="Submit"/>
</form>

Dione · Accepted Answer · 2019-04-22 12:10:25Z

2

You can remove the break statement.see the below mentioned code.

$(document).ready(function(){
$("form").submit(function(){
        if ($('input:checkbox').filter(':checked').length < 1){
            alert("Please select at least one option from above!");
            return false;
        }
    });
});

answered Apr 22, 2019 at 12:10

Dione

413 bronze badges

Collectives™ on Stack Overflow

Submit form only if at least one checkbox is checked using javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related