Javascript如何基于另一个表单创建一个表单

Javascript how to make an form based on another form

本文关键字：表单 一个 创建 何基于 另一个 Javascript      更新时间：2023-09-26

我正试图使一个基于myform复选框的表单。

myform2应该具有myform2中具有相同输入字段的所有选中的复选框。

我该怎么做?

<h1>Heading 1</h1>
<form name="myform" method="POST" action="/cgi-bin/script.cgi">
<input name="box1" type="checkbox" value="Bike" />
<input name="box2" type="checkbox" value="Car" />
</form> 
<h2>Heading 2</h2>
<form name="myform2" method="POST" action="/cgi-bin/script.cgi">
<script type="text/javascript">
var i=5;
var b=0;
while (b<=i) {
    document.write('<br />' + '<input type="checkbox"' + 'value="Bike"' + '/>' + '<label for="male">'+ "Male" + '</label>' )
}
</script>
</form>

您可以使用jquery执行以下操作:

$('form:eq(0) input').clone().appendTo('form:eq(1)');

它应该克隆页面上第一个表单元素下的所有input dom元素，并将它们放入页面上的第二个表单元素中。还没有测试过，但希望能做你正在寻找的。

如果您只想复制选中的输入元素，您可以尝试这样做:

$('form:eq(0) input:checked').clone().appendTo('form:eq(1)');

然而，如果你选中了单选按钮，它也会克隆这些按钮，如果你想防止这种情况发生，你必须做得更漂亮，可以这样写:

$('form:eq(0) input:checkbox').filter(':checked').clone().appendTo('form:eq(1)');

这应该只复制类型为checkbox和被选中的输入元素。

(在我看来)你可以从skorks的回答中看到。但是，如果你别无选择，只能在没有库的情况下完成它，这里有一个js来完成它。

<h1>Heading 1</h1>
<form name="myform" method="POST" action="/cgi-bin/script.cgi">
<input name="box1" type="checkbox" value="Bike" checked />
<input name="box2" type="checkbox" value="Car" />
</form> 
<h2>Heading 2</h2>
<form name="myform2" method="POST" action="/cgi-bin/script.cgi">
<script type="text/javascript">
var my_form = document.forms[0];
var num_inp = my_form.elements.length;
var me, i;
for (i=0; i<num_inp; i++) {
    me = my_form.elements[i];
    if(me.type === "checkbox" && me.checked)
    document.write('<input type="checkbox" value="' + me.value + '" name="' + me.name + '" checked /> ' + me.value + '<br/>');
}
</script>
</form>

顺便说一下，不清楚您从哪里获得生成的checkboxes的labels的数据，最佳选择是checkbox的value，我使用了它。

相关文章：