Pass checkbox values into an array using ajax to jsp

Question

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>

@guradio unfortunately that only gets you the first checked value. You need to loop through them all — Rory McCrossan
– Rory McCrossan, Commented Sep 30, 2016 at 9:01

Rory McCrossan · Accepted Answer · 2016-09-30 10:14:10Z

2

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);
        }
    });
});

edited Sep 30, 2016 at 10:14

answered Sep 30, 2016 at 8:59

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Giorgos Over a year ago

@Rory McCrossan I got this error: Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: invid

Rory McCrossan Over a year ago

@Giorgos please edit your question to include your code as you've made an error somewhere. Sounds like you've got a jQuery selector wrong somewhere, like $(':invid')

Giorgos Over a year ago

@Rory McCrossan I need only the checked values, also how to get the values from the collect jsp?

Rory McCrossan Over a year ago

Ah, my mistake. I missed the :checked selector: $('.invid:checked'). I'm not familiar with JSP, but it will be sent as a string which you can presumably split() in to an array on the server side.

Prajwal · Accepted Answer · 2016-09-30 09:03:08Z

1

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(),

answered Sep 30, 2016 at 9:03

Prajwal

4195 silver badges10 bronze badges

Comments

jupeter · Accepted Answer · 2016-09-30 10:12:33Z

0

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>

edited Sep 30, 2016 at 10:12

answered Sep 30, 2016 at 10:06

jupeter

7444 silver badges18 bronze badges

1 Comment

Giorgos Over a year ago

How to get the values from collect.jsp?

Collectives™ on Stack Overflow

Pass checkbox values into an array using ajax to jsp

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related