Sending parts of form using jQuery serialize() and AJAX

If you really want to stay with only one form try something like I did in this fiddle.

Create sub parts for your form.

<form>    <div id="first">        <input name="tbox1" type="text">        <input name="tbox2" type="text">        <input name="tbox3" type="text">            <input id="button1" type="button" value="button1">      </div>    <div id="second">        <input name="tbox4" type="text">        <input name="tbox5" type="text">        <input name="tbox6" type="text">            <input id="button2" type="button" value="button2">      </div></form>

And then just select all the elements of the parts:

$(document).ready(function() {    $('#button1').on('click', function() {        alert($('#first input').serialize());    });      $('#button2').on('click', function() {        alert($('#second input').serialize());    });});

Of course if you also have select boxes you have to add them to the selectors. For example:

$('#second input, #second select').serialize()

Try DEMO and CODE

Example, modify to your needs:

<form name="test">    <input type="textinput" name="first" value="test1" class="form2" /> <br/>    <select name="second" class="form1">        <option value="1">opt 1</option>        <option selected="selected" value="2">opt 2</option>    </select>    <input type="textinput" name="third" value="test1" class="form2" /> <br/></form><script>(function() {    // get second form elements    var options = $('form[name=test]').find('input, textarea, select').filter('.form2').serialize();     alert(options);}())</script>

This will get all inputs that have form2 class.

A more semantic and granular approach is to use custom properties to select the different form parts. Makes it easier to reassign form elements to different buttons without messing with containers.

$('button[name="button1"]').click(function() {  data = $('[scope="part1"]').serialize();  console.log(data);});$('button[name="button2"]').click(function() {  data = $('[scope="part2"]').serialize();  console.log(data);});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form>  <input type="text" name="text1" scope="part1" />  <input type="text" name="text2" scope="part1" />  <input type="text" name="text3" scope="part1" />  <input type="text" name="text4" scope="part1" />  <button type="button" name="button1">Button 1</button>  <input type="text" name="text5" scope="part2" />  <input type="text" name="text6" scope="part2" />  <input type="text" name="text7" scope="part2" />  <input type="text" name="text8" scope="part2" />  <button type="button" name="button2">Button 2</button></form>