Question

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

示例：

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

点击按钮后，我想为另一所学校增加2个输入。学位。使用jQuery轻松实现。

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

Answer 1

你可以让它们成为一个数组......

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

Answer 2

您可以使用隐藏输入来保存对的数量

当你点击按钮时，你会添加一个新名字，名字后缀为计数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 3

如果你使用PHP，你可以

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

Answer 4

您始终可以统计现有节点并创建新节点。假设基本字段集的标识为qual 以下代码可以完成这项工作：

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小提琴上查看工作示例：http://jsfiddle.net/hunkyhari/4QUXz/

具有唯一名称的动态表单

4 个答案: