submit only specific fields in a form

Question

I have something like this

 <div id="list">
 <form>
      <div id="first">
           <label><input type="checkbox" value="third"> third</label>
           <label><input type="checkbox" value="fourth"> fourth</label>
      </div>

      <div id="second">
           <label><input type="checkbox" value="first"> first</label>
           <label><input type="checkbox" value="second"> second</label>
      </div>

     <div id="fake-list-sorted-alphabetically">
           <label><input type="checkbox" value="first"> first</label>
           <label><input type="checkbox" value="second"> second</label>
           <label><input type="checkbox" value="third"> first</label>
           <label><input type="checkbox" value="fourth"> second</label>
     </div>
 </form>
 </div>

would it just be possible with the $.ajax to serialize only the checkbox values from div#first, div#second and ignore everything from #fake? right now I'm just doing a $('#fake').html(""); right before I submit but that feels hacky. The reason I don't have #fake outside of the form is because I need it to display in the same container as #first and #second as part of a view all function

Answer 1

Something like:

$('#first input').serialize();

Based on your updated question:

$('form div:not(#fake-list-sorted-alphabetically) :input').serialize()

Answer 2

There're array of input fields: var data = $("#first input").serializeArray();

To submit form with ajax: $.post("you action url", data);

http://api.jquery.com/serializeArray/

Answer 3

You can gather just the data you want into an object and pass that object to your ajax call to send it to the server. If you're using a submit button, you can bind a click handler to it and use event.preventDefault() on the event to stop it from submitting everything. After that, go ahead and use jquery to grab the values you want from the form and then make the ajax call with that data.