CODEWITHSUNDEEP
javascriptphpjqueryajaxcheckbox
mudraya
mudraya

Reputation: 99

how to pass values of several checkboxes with jquery ajax

To get the value from several checkboxes i use this code:

 <form class="myform" method="post" action="">
        <input type="checkbox" class="checkbox" value="11" /><br>
        <input type="checkbox" class="checkbox" value="22" /><br>
        <input type="submit" value="Go" />
  </form>

The ajax:

$(document).ready(function(){
            $('.myform').on('submit', function(e){
                //Stop the form from submitting itself to the server.
                e.preventDefault();
                var checkboxvalue = $('.checkbox').val();
                $.ajax({
                    type: "POST",
                    url: '',
                    data: {checkboxvalue: checkboxvalue},
                    success: function(data){
                        $('.response').html(data);
                    }
                });
            });
        });

The php:

   if($_SERVER['REQUEST_METHOD'] == "POST") {  

      $value = false;
      if(isset($_POST['checkboxvalue'])){
         $value = $_POST['checkboxvalue'];
      }

      echo 'The value was: ' . $value;
      exit;
   }

The problem is: when checking the second checkbox, i get the value 11 , thats the value of the first checkbox. When clicking both checkboxes, i also get the value 11

What i want to achieve: if i check the first checkbox, het should give me 11 as output. Checking the second checkbox, he should output 22 as value. And when checking both checkboxes, he should output 11 and 22 as value.

How can i achieve this?

Upvotes: 3

Views: 1692

Answers (4)

Sandeep K.
Sandeep K.

Reputation: 759

USE THIS

$(document).ready(function(){
   $('.myform').on('submit', function(e){
        e.preventDefault();
        var checkboxvalue =  [];    
        $("input[type=checkbox]:checked").each(function(i){
          checkboxvalue.push( i.value );
        });
      $.ajax({
                type: "POST",
                url: '',
                data: {checkboxvalue: checkboxvalue},
                success: function(data){
                    $('.response').html(data);
                }
            });
        });
    });

the php

 if($_SERVER['REQUEST_METHOD'] == "POST") {  
  $value = false;
  /* the check box value in array*/
  print_r($_POST['checkboxvalue']);
  if(isset($_POST['checkboxvalue'])){
     $value = $_POST['checkboxvalue'];
  }      
  exit;
  }

Upvotes: 3

Mikel Wohlschlegel
Mikel Wohlschlegel

Reputation: 1476

You need to create an array and fill with the values, if checkbox has been checked.

$(document).ready(function(){
        $('.myform').on('submit', function(e){
            //Stop the form from submitting itself to the server.
            e.preventDefault();
          var values = [];
          $('.checkbox').each(function() {
            if ($(this).is(':checked')) {
              values.push($(this).val());
            }

          });
          console.log(values);
        });
    });

See Codepen

Upvotes: 0

Prakash Saripaka
Prakash Saripaka

Reputation: 302

You need to loop through the checkbox which are selected, problem with your code is it is always giving you the value of first selected checkbox always

var chkArray = [];
	
$(".checkbox:checked").each(function() {
	chkArray.push($(this).val());
});
	
var selected;
selected = chkArray.join(',') ;

console.log(selected)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div><input type="checkbox" value="1" class="checkbox"> Value 1</div>
    <div><input type="checkbox" value="2" class="checkbox" checked="checked"> Value 2</div>
    <div><input type="checkbox" value="3" class="checkbox"> Value 3</div>
    <div><input type="checkbox" value="4" class="checkbox"checked="checked"> Value 4</div>
    <div><input type="checkbox" value="5" class="checkbox"> Value 5</div>

Upvotes: 0

Shibon
Shibon

Reputation: 1574

You need to added name attribute to check 

<input type="checkbox" class="checkbox" name="value-check" value="11" /><br>

var checkboxvalue = [];
        $.each($("input[name='value-check']:checked"), function(){            
            checkboxvalue.push($(this).val());
        });

Upvotes: 0

Related Questions