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

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

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

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

$.ajax({

url: "process.php",

type: "GET",

data: data,

cache: false,

success: function (html) {

})

});

Collectives™ on Stack Overflow

Pass checkbox through jquery ajax submit

3 Answers 3

1 Comment

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Related