CODEWITHSUNDEEP
javascriptjquerycheckbox
Opsional
Opsional

Reputation: 543

Block form submit if no one checkbox checked

I need help because confused how to block form submit if no one checkbox checked.

var $form = $('#send-invite-form');
var $checkbox = $('input[class^="invitation-friends"]');

$form.on('submit', function(e) {
  $.each($checkbox, function(index, value) {
    if (!$(value).is(':checked')) {
      alert('Opps! You not select friends.');
      e.preventDefault();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="send-invite-form">
  <input type="checkbox" class="invitation-friends" value="875" />
  <input type="checkbox" class="invitation-friends" value="394" />
  <button type="submit">Send</submit>
    </form>

The code check every checkbox. I don't want it. I want if one checkbox checked, the form can submit. If no one checked, bail submit.

Please help.

Upvotes: 2

Views: 3678

Answers (4)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

The first problem comes from this line :

if ( !$(value).is(':checked')) {

Should be :

if ( !$(this).is(':checked')) {

Since value contains the value of the selected checkbox not the object, so $(value) will not work.

Then if you want to submit with at least one checkbox you could check the length of checked input's like :

if( $('input.invitation-friends:checked').length == 0 )
{
    return false; 
}


var $form = $('#send-invite-form');
var $checkbox = $('input[class^="invitation-friends"]');

$form.on('submit', function(e) {
  if( $('input.invitation-friends:checked').length == 0 )
  {
    return false; 
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="send-invite-form">
  <input type="checkbox" class="invitation-friends" value="875" />
  <input type="checkbox" class="invitation-friends" value="394" />

  <button type="submit">Send</submit>
</form>

Upvotes: 1

Rajkumar Somasundaram
Rajkumar Somasundaram

Reputation: 1270

Since submit button is controlling form submit, I am controlling its enable/disable status based on checkbox click

window.onload = checkBoxEventAndOnSubmitFunctionality();

  function checkBoxEventAndOnSubmitFunctionality() {
    let checkBoxes = document.getElementsByClassName('invitation-friends');
    let checkBoxChecked = 0;
    
    for(i=0;i<checkBoxes.length;i++) {
       checkBoxes[i].onclick = function(e) {
          if(e.path[0].checked) checkBoxChecked += 1;
          else checkBoxChecked -= 1;
       }
    }
    document.getElementById("send-invite-form").onsubmit = function(e) {
      if(checkBoxChecked !=0) {
        alert("can submit");
         document.getElementById("send-invite-form").submit();
      }
      else {
        alert("can NOT submit");
        e.preventDefault();
      }
    }
  }	
<form id="send-invite-form" onsubmit="checkForCheckBoxes" method="POST">
     <input type="checkbox" class="invitation-friends" value="875" />
     <input type="checkbox" class="invitation-friends" value="394" />

     <button type="submit" id="submitButton">Send</button>
</form>

Upvotes: 1

Scott Marcus
Scott Marcus

Reputation: 65806

There is a way to do this that is much simpler than what you are doing. There's no need to loop. Just used the :checked pseudo-class selector to get a set of nodes that are checked and check the .length of the resulting set of nodes. If the .length is 0, no checkboxes have been checked.

$( '#send-invite-form' ).on('submit', function(e) {
   if($( 'input[class^="invitation-friends"]:checked' ).length === 0) {
      alert( 'Oops! You not select friends.' );
      e.preventDefault();
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="send-invite-form">
     <input type="checkbox" class="invitation-friends" value="875" />
     <input type="checkbox" class="invitation-friends" value="394" />

     <button type="submit">Send</submit>
</form>

Upvotes: 3

Kaddath
Kaddath

Reputation: 6151

try this, no need to explain i think:

var found = false;
$.each( $checkbox, function(index, value) {
    if( $(this).is(':checked') ) {
        found = true;
    }
});
if(!found){
    alert( 'Opps! You not select friends.' );
    e.preventDefault();
}

Upvotes: 1

Related Questions