jal jal - 1 year ago 144
Ajax Question

Sending parts of form using jQuery serialize() and AJAX

I'm trying to send parts of one form by AJAX using jQuery's serialize. The form has 16 textfields. I have 4 buttons. The

sends the textfields 0,1,2,3, and
sends the textfields 4,5,6,7, etc etc. How can I do it?


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<form id='miForm' class='miForm' name='miForm' action='env.php' method='POST'>



$('form').append('Campo de texto '+i+'<input type="text" id="txt'+i+'" value="Campo '+i+'" readonly="yes"/><br>');
$('form').append('<input type="button" id="butEnv'+i+'" value="Enviar'+i+'"/><br>');
$('form').append('<input type="button" id="butGen" value="Enviar Global"/><br>');


Answer Source

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

Create sub parts for your 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 id="second">
        <input name="tbox4" type="text">
        <input name="tbox5" type="text">
        <input name="tbox6" type="text">    
        <input id="button2" type="button" value="button2">  

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()
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download