Question

This question is closely related to Jquery – Send only some value from a form . I have a form:

<form accept-charset="UTF-8" action="/filter" data-remote="true" method="get">
  <div>
  <div>
    <h2 class="sort">Sort</h2>
    <select class="checkable" id="sort" name="sort">
         <option value='v'>Rank</option>
         <option value='n'>Alphabetical</option>
    </select>
  </div>
  <div>
    <h2 class="tag">Categories</h2>
    <ul>
      <li>
        <input name="category[a]" type="hidden" value="0" />
        <input class="checkable" id="category_a" name="category[a]" type="checkbox" value="1" />
        <span>a</span>
      </li>
      <li>
        <input name="category[adfsadf  fasdf]" type="hidden" value="0" />
        <input class="checkable" id="category_adfsadf  fasdf" name="category[adfsadf  fasdf]" type="checkbox" value="1" />
        <span>adfsadf  fasdf</span>
      </li>
      <li>
        <input name="category[another]" type="hidden" value="0" />
        <input class="checkable" id="category_another" name="category[another]" type="checkbox" value="1" />
        <span>another</span>
      </li>
      <li>
        <input name="category[another tag]" type="hidden" value="0" />
        <input class="checkable" id="category_another tag" name="category[another tag]" type="checkbox" value="1" />
        <span>another tag</span>
      </li>
    </ul>
  </div>
</form>

I only want to send via ajax the categories that are checked. This is what I currently have to send everything from the form:

 $('.checkable').live('change',
   function() {
     $(this).parents('form:first').submit();
 });

This works great, but when the number of categories is really high, the request is unnecessarily long. I don’t know how to go about writing the submit function for this. Or maybe another approach is better? Thanks in advance!

—– solution —–

Used ajax route instead

$('.checkable').live('change',
function() {

var dataString = 'sort='+ $('#sort').val();
$('input[type=checkbox]').each(function () {
    if($(this).is(":checked")) {
      dataString += '&'+$(this).prop('name')+'=1';
    }
});
alert
$.ajax({  
  type: "GET",  
  url: "/filter",  
  data: dataString,  
  success: function() {  
  }  
});

});

Answer 1

Check out this link, instead of submitting the entire form just do an ajax post and only include the form elements that you want sent. http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

Here is a sample post, you could easily just use the checked selector to send only checked intputs

var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;  
//alert (dataString);return false;  
$.ajax({  
  type: "POST",  
  url: "bin/process.php",  
  data: dataString,  
  success: function() {  
    $('#contact_form').html("<div id='message'></div>");  
    $('#message').html("<h2>Contact Form Submitted!</h2>")  
    .append("<p>We will be in touch soon.</p>")  
    .hide()  
    .fadeIn(1500, function() {  
      $('#message').append("<img id='checkmark' src='images/check.png' />");  
    });  
  }  
});  
return false;