Submit value of a checkbox through javascript

Question

I am trying to submit values of a form through javascript it contains both text and two checkboxes.

<script>
  function SubmitFormData2() {
      var preffered_loc = $("#preffered_loc").val();
      var relocation = $(".relocation").val();
      $.post("r_two.php", { preffered_loc: preffered_loc,relocation: relocation },
      function(data) {
       $('#results').html(data);
       $('#myForm2')[0].reset();
      });
  }
</script>

<form id="myForm2" method="post" style="margin-left: -10%;">
   <input type="text" class="form-control" id="preffered_loc" name="preffered_loc">
   <input type="checkbox" name="relocation[]" class="relocation[]" value="Yes">
   <input type="checkbox" name="relocation[]" class="relocation[]" value="No" >
   <input type="button" id="submitFormData2" onclick="SubmitFormData2();" value="Submit" />
</form>

r_two.php

<?
$preffered_loc  =  $_POST['preffered_loc'];
$relocation = $_POST['relocation'];
?>

i am able to save the first value but i am not able to save relocation value, can anyone tell how i can save relocation. Important point here is that user can select both checkboxes also

The issue is that $relocation is picking only value yes even if i select 2nd selectbox. can anyone please correct my code

There is no element with ID `relocation`You are using `id="relocation[]"` twice __Identifiers in HTML must be unique.__ , On second thought, Are you sure you want `checkbox` for `Yes` and `No`? — Satpal, Jan 20 '16 at 12:31
As you are using id in selector it always returns first DOM object. You might wanna change your selector to class or something else — Diljohn5741, Jan 20 '16 at 12:32
@Satpal yes i would like to use checkbox only however i can go for some other way to pass the value to php script — , Jan 20 '16 at 12:36
@Diljohn5741 i tried to change it to class but still not working — , Jan 20 '16 at 12:36
if its just and YES/NO option, should not be using radio button insted of check box?, also, if you want to use checkbox you should first check wich one is checked and then pass that value. — Shocklo, Jan 20 '16 at 12:39
If you want to submit either of the values at one time try using radio button with same name attribute. Then check using below code jQuery('input:radio:checked').val() — Diljohn5741, Jan 20 '16 at 12:43
Use radio not checkbox, don't use [] in a css class, remove the [] from the name of the radio (again, this is not a checkbox scenario, style it if you want it to look that way), also where's your #results element? — Matt Murphy, Jan 20 '16 at 12:51
And could I suggest binding your event with `$(document).on('click','#submitFormData2', function() {SubmitFormData();});` or similar rather than using an onclick declaration in the element? — Matt Murphy, Jan 20 '16 at 12:54

score 2 · Answer 1 · answered Jan 20 '16 at 12:48

try this.

function SubmitFormData2() {
        var preffered_loc = $("#preffered_loc").val();
        var relocation = $("#relocation").is(":checked");
        var relyn = "";
        if(relocation){
            relyn = "Yes";
        }else{
            relyn = "No";
        }
        $.post("r_two.php", { preffered_loc: preffered_loc,relocation: relyn },
        function(data) {
           $('#results').html(data);
           $('#myForm2')[0].reset();
        });
        alert("{ preffered_loc: "+preffered_loc+",relocation: "+relyn+" }");
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm2" method="post" style="margin-left: -10%;">
        <input type="text" class="form-control" id="preffered_loc" name="preffered_loc">
        <input type="checkbox" name="relocation[]" id="relocation" /> 
        <input type="button" id="submitFormData2" onclick="SubmitFormData2();" value="Submit" />
    </form>

As Satpal said:

You don't need two checkbox, maybe you want a radio button, but one checkbox can be checked = yes, not checked = no. I removed one of them.
You don't have an ID relocation. I changed it.
With the jQuery is(":checked") you get a true or false so I parse it to a Yes or No, following your code.

score 1 · Answer 2 · answered Jan 20 '16 at 12:54

Since its a checkbox and not a radio user can have multiple selections, for eg:

<input type="checkbox" name="relocation[]" class="relocation" value="Yes">
<input type="checkbox" name="relocation[]" class="relocation" value="No" >
<input type="checkbox" name="relocation[]" class="relocation" value="Both" >

try using the :checked selector,

$( ".relocation:checked" ).each(function(i,v){
   alert(v.value)
});

Demo here

score 0 · Answer 3 · edited May 23 '17 at 11:52

You couldn't select the checkbox elements at all because you weren't including the [] in the selector. You can either escape the brackets as described in this SO Q/A or simply remove the brackets (the example code below does the latter)

I'd suggest using radio buttons as the user can immediately see what the options are. (Have a third option for both)

The code below uses checkboxes and puts all selected options into an array that gets passed along. This will allow the user to use both options

<script>
  function SubmitFormData2() {
      var preffered_loc = $("#preffered_loc").val();
      var relocation = [];
     $(".relocation:checked").each(function () {
        relocation.push ($this.vak ();
     }); // :checked is provided by jquery and will only select a checkbox/radio button that is checked
      $.post("r_two.php", { preffered_loc: preffered_loc,relocation: relocation },
      function(data) {
       $('#results').html(data);
       $('#myForm2')[0].reset();
      });
  }

And don't forget to remove [] from the checkboxes class.

Question was not for radio button. – Devendra Soni Jan 20 '16 at 13:00 — Devendra Soni, Jan 20 '16 at 13:00

score 0 · Answer 4 · answered Jan 20 '16 at 12:58

I think you should use class for the check-boxes instead of id, because id must be unique for each field. You should try this:

 <form id="myForm2" method="post" style="margin-left: -10%;">
        <input type="text" class="form-control" id="preffered_loc" name="preffered_loc">
        <input type="checkbox" name="relocation[]" class="relocation" value="Yes">
        <input type="checkbox" name="relocation[]" class="relocation" value="No" > 
        <input type="button" id="submitFormData2" onclick="SubmitFormData2();" value="Submit" />
    </form> 

   <script>
    function SubmitFormData2() {
        var preffered_loc = $("#preffered_loc").val();
    var relocation = '';
    var sap = '';
    $( ".relocation" ).each(function() {

        if($( this ).is(':checked')){
            relocation = relocation+''+sap+''+$( this ).val();
            sap = ',';
        }
    });
        alert(rel);
        $.post("r_two.php", { preffered_loc: preffered_loc,relocation: relocation },
        function(data) {
         $('#results').html(data);
         $('#myForm2')[0].reset();
        });
    }
    </script>

score 0 · Answer 5 · answered Jan 20 '16 at 12:59

Here is a sample code for your reference

<form id="myForm" method="post">
     Name:    <input name="name" id="name" type="text" /><br />
     Email:   <input name="email" id="email" type="text" /><br />
     Phone No:<input name="phone" id="phone" type="text" /><br />
     Gender:  <input name="gender" type="radio" value="male">Male
          <input name="gender" type="radio" value="female">Female<br />

    <input type="button" id="submitFormData" onclick="SubmitFormData();" value="Submit" />
   </form>

function SubmitFormData() {
    var name = $("#name").val();
    var email = $("#email").val();
    var phone = $("#phone").val();
    var gender = $("input[type=radio]:checked").val();
    $.post("submit.php", { name: name, email: email, phone: phone, gender: gender },
    function(data) {
     $('#results').html(data);
     $('#myForm')[0].reset();
    });
}

score 0 · Answer 6 · answered Jan 20 '16 at 14:01

<script>
        function SubmitFormData2() {
            var preffered_loc   = $("#preffered_loc").val();
            var relocation      = {};

            $('.relocation').each(function(index) {
                if ($(this).is(':checked')) {
                    relocation[index] = $(this).val();
                }
            });

            relocation = JSON.stringify(relocation);

            $.post("r_two.php", { preffered_loc: preffered_loc, relocation: relocation }, function(data) {
               $('#results').html(data);
               $('#myForm2')[0].reset();              
            });
        }
    </script>

Variable 'relocation' must be an object to contain multiple values, like you said a user can select both YES and NO. And change the checkbox class from relocation[] to relocation.

Submit value of a checkbox through javascript

6 Answers6