jquery - 具有唯一名称的动态表单

Question

我有一个表单，用户可以在其中动态添加更多字段。

例子：

<form>
  <input name="school" type="text" />
  <input name="degree" type="text" />
  <button role="button">Add another school</button>
</form>

单击该按钮时，我想为另一所学校和学位再添加 2 个输入。使用 jQuery 轻松实现。

我应该为新name属性设置什么？当我提交此表格时，我想要独特的学校和学位对。

Answer 1

你可以有一个隐藏的输入来保存对的数量

当你点击按钮时，你会添加新的一对，名字后缀为 ex:"school[i]"，然后增加计数..

在服务器端，您读取计数输入，然后从 0 循环到 count-1 以读取对

检查此代码 http://jsfiddle.net/2jdmP/

<form>
  <input name="pair_count" id="pair_count" value="1" type="hidden" />
  <p>
    <input name="school0" type="text" />
    <input name="degree0" type="text" />
  </p>  

  <button role="button" id="add_button">Add another school</button>
</form>

JS

$(document).ready(function(){
    $('#add_button').click(function(){

        var pair_count = $('#pair_count');
        var count = parseInt( pair_count.val() );

        $(this).before(' <p><input name="school'+ count +'" type="text" /> <input name="degree'+count+'" type="text" /> </p>')
        pair_count.val( count+1 );

        return false;
    })
})

Answer 2

您始终可以计算现有节点并创建新节点。假设基本字段集有一个 idqual 下面的代码可以完成这项工作：

var nextIndex = $('#qual > fieldset').length+1;
var next_row='<fieldset id="pair'+nextIndex+'"><input type="text" name="school'+nextIndex+'"/><input type="text" name="degree'+nextIndex+'"/></fieldset>';
$('#qual').append(next_row);

您可以查看 js fiddle 上的工作示例：http: //jsfiddle.net/hunkyhari/4QUXz/

Answer 3

你可以把它们做成一个数组....

<form>
  <input name="school[]" type="text" />
  <input name="degree[]" type="text" />
  <button role="button">Add another school</button>
</form>

Answer 4

如果你使用 PHP，你可以

<input name="school[]" type="text" />
<input name="degree[]" type="text" />