blocks|key|115699|text|试试DEMO+and+CODE|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|115700|例如，根据需要进行修改：|115701|<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>|code-block|syntax|javascript|115702|这将获得所有具有form2类的输入。|115703|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/m89tu/3/^0|2|D|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>Try <a href="http://jsfiddle.net/m89tu/3/" rel="nofollow">DEMO and CODE</a></p>

<p>Example, modify to your needs:</p>

<pre><code>&lt;form name="test"&gt;
    &lt;input type="textinput" name="first" value="test1" class="form2" /&gt; &lt;br/&gt;
    &lt;select name="second" class="form1"&gt;
        &lt;option value="1"&gt;opt 1&lt;/option&gt;
        &lt;option selected="selected" value="2"&gt;opt 2&lt;/option&gt;
    &lt;/select&gt;
    &lt;input type="textinput" name="third" value="test1" class="form2" /&gt; &lt;br/&gt;
&lt;/form&gt;

&lt;script&gt;
(function() {
    // get second form elements
    var options = $('form[name=test]').find('input, textarea, select').filter('.form2').serialize(); 

    alert(options);

}())
&lt;/script&gt;
</code></pre>

<p>This will get all inputs that have form2 class.</p>


blocks|key|333208|text|如果您真的想只使用一种表单，可以尝试像我在this+fiddle中所做的那样。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|333209|为窗体创建子部件。|333210|<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>|code-block|syntax|javascript|333211|然后只需选择零件的所有元素：|333212|$(document).ready(function()+{
++++$('#button1').on('click',+function()+{
++++++++alert($('#first+input').serialize());
++++});

++++++$('#button2').on('click',+function()+{
++++++++alert($('#second+input').serialize());
++++});
});|333213|当然，如果您也有选择框，则必须将它们添加到选择器中。例如：|333214|$('#second+input,+#second+select').serialize()|333215|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/yCpzx/6/^0|L|B|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|C|$]]|$1|Q|3|R|5|H|7|19|8|@]|9|@]|C|$I|J]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]]]

<p>If you really want to stay with only one form try something like I did in <a href="http://jsfiddle.net/yCpzx/6/" rel="noreferrer">this fiddle</a>.</p>

<p>Create sub parts for your form.</p>

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

<p>And then just select all the elements of the parts:</p>

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

      $('#button2').on('click', function() {
        alert($('#second input').serialize());
    });
});
</code></pre>

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

<pre><code>$('#second input, #second select').serialize()
</code></pre>


blocks|key|333222|text|var+formData++++=++++$(form).find('#selectedOptions+:+input')+.+serialize();
+++++++++$.post(url,+formData)++.done(function+(data)+
+++++++++{++
+++++++++++++alert('hi');
++++++++});

where+#selectedOptions+is+id+of+the+element.|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|333223|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var formData    =    $(form).find('#selectedOptions : input') . serialize();
         $.post(url, formData)  .done(function (data) 
         {  
             alert('hi');
        });

where #selectedOptions is id of the element.
</code></pre>


blocks|key|333258|text|一种更具语义和粒度的方法是使用自定义属性来选择不同的表单部分。更容易将表单元素重新分配给不同的按钮，而无需处理容器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|333259|​|333260|$('button[name="button1"]').click(function()+{
++data+=+$('[scope="part1"]').serialize();
++console.log(data);
});
$('button[name="button2"]').click(function()+{
++data+=+$('[scope="part2"]').serialize();
++console.log(data);
});|code-block|syntax|javascript|333261|<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>|333262|333263|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>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.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('button[name="button1"]').click(function() {
  data = $('[scope="part1"]').serialize();
  console.log(data);
});
$('button[name="button2"]').click(function() {
  data = $('[scope="part2"]').serialize();
  console.log(data);
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;form&gt;
  &lt;input type="text" name="text1" scope="part1" /&gt;
  &lt;input type="text" name="text2" scope="part1" /&gt;
  &lt;input type="text" name="text3" scope="part1" /&gt;
  &lt;input type="text" name="text4" scope="part1" /&gt;
  &lt;button type="button" name="button1"&gt;Button 1&lt;/button&gt;
  &lt;input type="text" name="text5" scope="part2" /&gt;
  &lt;input type="text" name="text6" scope="part2" /&gt;
  &lt;input type="text" name="text7" scope="part2" /&gt;
  &lt;input type="text" name="text8" scope="part2" /&gt;
  &lt;button type="button" name="button2"&gt;Button 2&lt;/button&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>


<p>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 <code>button0</code> sends the textfields 0,1,2,3, and <code>button1</code> sends the textfields 4,5,6,7, etc etc. How can I do it?</p>

<p>HTML</p>

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

    &lt;/form&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>jQuery:</p>

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

    });
</code></pre>


Sending parts of form using jQuery serialize() and AJAX

容器

jQuery

我正在尝试使用jQuery的serialize通过AJAX发送表单的一部分。该表单有16个文本字段。我有4个按钮。button0发送文本字段0,1,2,3，button1发送文本字段4,5,6,7等等，我该怎么做呢？HTML<html> <head>    <meta http-equiv="Content-Type"...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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