Pass checkbox through jquery ajax submit

Question

Problem solved

I've searched several sources of info for this kinda problems. But there's no solution exactly. The problem is I cannot pass the checkboxes value to div id with ajax. It keeps openning in a parent window. Here's my codes.

Javascript:

<script type="text/javascript">
$(document).ready(function() {  
    $("#villa_submit").click(function() {   
        var action = $("#villa_choose").attr('action');
//var form_data = { 'vid[]' : []};$("input:checked").each(function() {data['vid[]'].push($(this).val());});
var form_data = $('#villa_choose').serialize();  //suggested by Kev Price 
        $.ajax({
            type: "POST",
            url: action,
            data: form_data,
            beforeSend:function(){
                $('#villa_result').html('<center><img src="/images/loading.gif" alt="Loading..." align="absmiddle"/> loading...</center>');
              },
            success: function(data){
                  $('#test_result').html(data);
            }
        });     
        return false;
    }); 
});
</script>

HTML:

<form name="villa_choose" id="villa_choose" method="post" action="">
<input type="checkbox" name="vid[]" id="vid1" value="1" />
<input type="checkbox" name="vid[]" id="vid2" value="2" />
<input type="checkbox" name="vid[]" id="vid3" value="3" />
<input type="checkbox" name="vid[]" id="vid4" value="4" />
<input type="checkbox" name="vid[]" id="vid5" value="5" />
</form>

<div id="test_result"></div>

have you tried sending the form data as a serialised array? i.e. var form_data = $('#villa_choose').serialize(); — Kev Price
– Kev Price, Commented Nov 8, 2012 at 17:18
Glad to hear it - I probably should have added it as a solution rather than a comment. Probably worth editing your original question to show the solution so that it is obvious — Kev Price
– Kev Price, Commented Nov 8, 2012 at 17:39

Madbreaks · Accepted Answer · 2012-11-08 17:16:48Z

3

You have multiple <input> elements with this same id attribute. This is not allowed, id must be unique in the document. Fix that and try again.

answered Nov 8, 2012 at 17:16

Madbreaks

19.6k7 gold badges62 silver badges75 bronze badges

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

1 Comment

Madbreaks Over a year ago

Downvoter, please indicate your reason for doing so.

Eric Robinson · Accepted Answer · 2012-11-08 17:23:43Z

3

Once you fix the issues Madbreaks suggested you can get the check box values into an array like this in your jquery

var values = $("input[type='checkbox']:checked").map(function () {
    return this.value;
}).get();



values will be an array that you can pass with ajax like this

var data = 'checkbox="'+values+'"';
$.ajax({
    url: "process.php",
    type: "GET",
    data: data,
    cache: false,
    success: function (html) {
        ... // change html on return
    }

});

Hope that helps

answered Nov 8, 2012 at 17:23

Eric Robinson

2,09515 silver badges22 bronze badges

1 Comment

Wilf Over a year ago

Thank you for your attempt. I found a solution. :)

duchuy · Accepted Answer · 2015-09-04 09:48:14Z

0

var data = $("#villa_choose").serializeArray();

$.ajax({

url: "process.php",

type: "GET",

data: data,

cache: false,

success: function (html) {

})

});

answered Sep 4, 2015 at 9:48

duchuy

6225 silver badges9 bronze badges

Collectives™ on Stack Overflow

Pass checkbox through jquery ajax submit

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related