使用jQuery serialize()和AJAX发送表单的部分

前端之家收集整理的这篇文章主要介绍了使用jQuery serialize()和AJAX发送表单的部分前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图通过AJAX发送一个窗体的部分使用jQuery的序列化。该表单有16个文本字段。我有4个按钮。 button0发送文本字段0,1,2,3,button1发送文本字段4,5,6,7等等,我该怎么做?

HTML

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

    </form>
 </body>
</html>

jQuery的:

$(document).ready(function(){
        for(i=0;i<16;i++){
            $('form').append('Campo de texto '+i+'<input type="text" id="txt'+i+'" value="Campo '+i+'" readonly="yes"/><br>');
        }
        for(i=0;i<4;i++){
            $('form').append('<input type="button" id="butEnv'+i+'" value="Enviar'+i+'"/><br>');
        }
        $('form').append('<input type="button" id="butGen" value="Enviar Global"/><br>');

    });

解决方法

如果你真的想留下只有一个表单尝试像我在 this fiddle年。

为您的表单创建子零件。

<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>

然后选择所有元素的元素:

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

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

当然,如果您还有选择框,您必须将它们添加到选择器。例如:

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

猜你在找的jQuery相关文章