CODEWITHSUNDEEP
phpjqueryhtmlajaxforms
Craig
Craig

Reputation: 195

Form submission not received because all checkboxes not checked

I have set-up a Sign Up form where the user has to check which service they would like, my HTML looks like this:

<label><input name="serviceopt1" type="checkbox" id="serviceopt1" value="1"> IT Services</label>
<label><input name="serviceopt2" type="checkbox" id="serviceopt2" value="1"> Catering Services</label>
<label><input name="serviceopt3" type="checkbox" id="serviceopt3" value="1"> PAT Testing</label>
<label><input name="serviceopt4" type="checkbox" id="serviceopt4" value="1"> Building Services</label>

Then I have set my ajaxform as follows where if non are selected then it will ask you to check the first checkbox:

var serviceopt1 = $("input[name=serviceopt1]:checked").val();
var serviceopt2 = $("input[name=serviceopt2]:checked").val();
var serviceopt3 = $("input[name=serviceopt3]:checked").val();
var serviceopt4 = $("input[name=serviceopt4]:checked").val();

if (serviceopt1 == "") {
    $("input:checkbox[name=serviceopt1]").val();
    $("input:checkbox[name=serviceopt1]").parent("label").css({color:"#b72a18"});
      return false;
    }

The issue I am having is if some of the following check boxes are unchecked they go through as undefined which stops the email confirmation coming through.

So how do I get around this so if they are checked they go through with a value of 1 and if they are unchecked the value is just 0.

Upvotes: 0

Views: 50

Answers (2)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Ok regarding your The issue I am having is if some of the following check boxes are unchecked they go through as undefined which stops the email confirmation coming through I would like to correct some of the things here.

When you write below line

var serviceopt1 = $("input[name=serviceopt1]:checked").val();

The serviceop1 will always be undefined if you haven't checked the checkbox because the above line $("input[name=serviceopt1]:checked") will check if the checkbox is checked and then gets its value. So while storing values in variables you just do

var serviceopt1 = $('input[name="serviceopt1"]').val();

This will get the value of input checkbox with name = serviceopt1. Same goes with other checkboxes too.

Now regarding changing the value you could use @DhavalMarthak's approach which changes checkboxes value and there will be value always in your variables

To perform validation you can do as below so that at least one checkbox is checked

if (serviceopt1 == "0" && serviceopt2=="0" && serviceopt3="0" && serviceopt4=="0" ) 
{
    //none of them are checked
    $.each($('input:checkbox[name^="serviceopt"]'),function(){
        $(this).parent("label").css({color:"#b72a18"}); //add css to all labels of checkbox since none of them are checked
        return false;
   }
}

I assume here that you need only one checkbox to be checked

Upvotes: 1

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

I am not sure what exactly you're looking for but following code might help you:

If you just want to set 1 where checkbox is checked and 0 where checkbox is no checked, just do this

$("input:checkbox").on("change",function(){
    $("input:checkbox").each(function(i,elem){
        this.checked ? this.value = 1 : this.value = 0
    });
});

Demo

Upvotes: 1

Related Questions