title: Pass checkbox through jquery ajax submit
body: <p><strong>Problem solved</strong></p>
  
  <p>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.</p>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(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('&lt;center&gt;&lt;img src="/images/loading.gif" alt="Loading..." align="absmiddle"/&gt; loading...&lt;/center&gt;');
                },
              success: function(data){
                    $('#test_result').html(data);
              }
          });     
          return false;
      }); 
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;form name="villa_choose" id="villa_choose" method="post" action=""&gt;
  &lt;input type="checkbox" name="vid[]" id="vid1" value="1" /&gt;
  &lt;input type="checkbox" name="vid[]" id="vid2" value="2" /&gt;
  &lt;input type="checkbox" name="vid[]" id="vid3" value="3" /&gt;
  &lt;input type="checkbox" name="vid[]" id="vid4" value="4" /&gt;
  &lt;input type="checkbox" name="vid[]" id="vid5" value="5" /&gt;
  &lt;/form&gt;
  
  &lt;div id="test_result"&gt;&lt;/div&gt;
  </code></pre>