CODEWITHSUNDEEP
javascriptjqueryajaxjsp
Giorgos
Giorgos

Reputation: 677

Pass checkbox values into an array using ajax to jsp

I have a form like the following, I need to pass the values of checkboxes that checked I dont know how.

<input type="checkbox" id="invid" name="invid" value="100236">
<input type="checkbox" id="invid" name="invid" value="100852">
<input type="checkbox" id="invid" name="invid" value="100962">
<input type="checkbox" id="invid" name="invid" value="100965">
<input type="checkbox" id="invid" name="invid" value="101002">

<button id="submit">Submit</button>

<script>

$('#submit').click(function() {

$.ajax({
    url: "collect.jsp",
    type: "post",
    data: Winvid: invid,
    success: function(data) {
    $('#response').html(data);
    }
});


});
</script>

Upvotes: 0

Views: 1899

Answers (3)

Rory McCrossan
Rory McCrossan

Reputation: 337714

Firstly your HTML is invalid as you have repeated the id property when they must be unique. Use classes instead:

<input type="checkbox" class="invid" name="invid" value="100236">
<input type="checkbox" class="invid" name="invid" value="100852">
<input type="checkbox" class="invid" name="invid" value="100962">
<input type="checkbox" class="invid" name="invid" value="100965">
<input type="checkbox" class="invid" name="invid" value="101002">

Then you can use map() to create an array of the selected checkbox values. Then you can provide an object to the data property of the $.ajax() method to pass the data in your request. Try this:

$('#submit').click(function() {
    var checkedValues = $('.invid:checked').map(function() {
        return this.value;
    }).get();

    $.ajax({
        url: "collect.jsp",
        type: "post",
        data: { invid: checkedValues },
        success: function(data) {
            $('#response').html(data);
        }
    });
});

Upvotes: 2

jupeter
jupeter

Reputation: 746

use .each , this demo check property checked 

$('#submit').click(function() {
    var arrayValue = [];
   // use name or class name
   $('input[name=invid]').each(function(){
     if($(this).prop('checked')){
       arrayValue.push($(this).val())
     }
   });

  console.log(arrayValue);
  // arrayValue use in $.ajax 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="invid" value="100236">
<input type="checkbox" name="invid" value="100852">
<input type="checkbox" name="invid" value="100962">
<input type="checkbox" name="invid" value="100965">
<input type="checkbox" name="invid" value="101002">

<button id="submit">Submit</button>

Upvotes: 0

Prajwal
Prajwal

Reputation: 419

Use check boxes as array:

 <input type="checkbox"  name="invid[]" value="100236">
    <input type="checkbox"  name="invid[]" value="100852">
    <input type="checkbox"  name="invid[]" value="100962">
    <input type="checkbox"  name="invid[]" value="100965">
    <input type="checkbox"  name="invid[]" value="101002">

.serialize() gives you a string of form encoded data.

Passing an object to data: will cause jQuery to encode the values in the form as form encoded data.

Since you have already encoded that data, you don't want to reencode it.

Pass the string directly.

data: $('.checkboxes:checked').serialize(),

Upvotes: 1

Related Questions