Question

我有一个以2个文本输入开头的表单。标准方案是用户在一个字段中输入一个数字，在另一个字段中输入他/她的名字，然后页面将被更新（不重新加载）。但在某些情况下，用户可能想要输入多个连接到相同名称的数字，并且实现方式是用户点击文本框旁边的“添加另一个”链接。

当用户单击“添加另一个”链接时，需要将文本框中的值插入到新的（动态创建的）文本字段中，并且应将用户输入数字的文本字段重置为默认值。用户可以在发出警报之前以这种方式输入10个号码，通知他/她更有效的方法来执行此操作。

我对如何完成（可以这样做）jQuery一无所知jQuery，如果有人可以提供帮助，那就太棒了。

这是我正在使用的HTML：

<div id="searchFields" class="control-group inlineForm">
    <label for="regNr">Regnr</label> <input type="text" id="regNr" class="uprCase" placeholder="Regnr." size="6" maxlength="6">
    <span class="addRegNr"><a href="#">add another</a></div>
    <label for="poNr">PO.nr</label> <input type="text" id="poNr" placeholder="PO.nr." size="12" maxlength="12">
    <input type="button" value="GET INFO" class="last" id="getBaseInf">
</div>

http://jsfiddle.net/RgKV9/

干杯！

编辑更新

我喜欢Aske G的例子，并对其进行了一些修改。以下是我正在使用的新代码，jsfiddle.net/SDpfy虽然我设法对AskeG的代码进行了一些细微的更改，但我无法弄清楚如何为每个生成的字段添加唯一ID和单独的删除链接，这些链接最终会出现在购物篮中。另外，如何将生成的字段设置为只读，并在它们出现在购物篮中时为它们设置动画？

Answer 1

只需在该范围内添加点击观察程序即可。检查这个小提琴：http://jsfiddle.net/ranjith19/RgKV9/4/

我做了一些基本的改变。如果你需要自定义名称id，你应该使用模板库然后追加它

<div id="searchFields" class="control-group inlineForm">
    <label for="regNr">Regnr</label> <input type="text" id="regNr" class="uprCase" placeholder="Regnr." size="6"
                                            maxlength="6">

    <label for="poNr">PO.nr</label> <input type="text" id="poNr" placeholder="PO.nr." size="12" maxlength="12">
    <input type="button" value="GET INFO" class="last" id="getBaseInf">

    <p></p>
</div>
<span class="addRegNr" style="display:inline"><a href="#">add another</a></span>&nbsp;&nbsp;&nbsp;
<script type="text/javascript">
    $(document).ready(function () {
        str_to_append = '<label for="regNr">Regnr</label> <input type="text" id="regNr" class="uprCase" placeholder="Regnr." size="6" maxlength="6">\
    <label for="poNr">PO.nr</label> <input type="text" id="poNr" placeholder="PO.nr." size="12" maxlength="12">\
    <input type="button" value="GET INFO" class="last" id="getBaseInf"><p></p>'
        $(".addRegNr").click(function () {
            $("#searchFields").append(str_to_append)
        })
    })

</script>

Answer 2

你可以使用jquery append方法来完成它。

这里我留下一些例子的链接：

http://api.jquery.com/append/

Answer 3

我想，您可能只是在寻找 something like this。

Answer 4

我会做这样的事情：

<div id="searchFields" class="control-group inlineForm">
<label for="regNr">Regnr&nbsp;</label><input type="text" id="regNr" class="uprCase" placeholder="Regnr." size="6" maxlength="6"/><br/>
</div>
<span class="addRegNr">add another</span><br/>
<label for="poNr">PO.nr</label> <input type="text" id="poNr" placeholder="PO.nr." size="12" maxlength="12">
<input type="button" value="GET INFO" class="last" id="getBaseInf">

然后是一些看起来像这样的js：

var $input = $("#searchFields").children();

$(".addRegNr").on("click", function(){
   var $newField = $input.clone();
   // change what you need to do with the field here.
   $(this).siblings("#searchFields").append($newField);
});

它也在这里：http://jsfiddle.net/tatLw/

Answer 5

要使用jQuery添加任何HTML，您最终会调用.append()（或其中一个变体，例如.before，.appendTo等。）

这些可以传递原始的HTML字符串，但是除非你准备好HTML模板，否则不要使用字符串连接来构建HTML，因为它很脆弱且不安全。而是使用jQuery()创建元素，例如：

jQuery('<input type="text"/>').attr({
    value: '',
    placeholder: '...',
    id: '..'
})
.addClass('foo').appendTo( .. )

此外，不要忘记为这些新元素创建标签（如果合适的话）。

与此方案相关的另外几个最佳实践：

如果您要动态制作新的表单元素（而不是为现有字段添加更多其他字段），最好不要使用JavaScript创建这些元素。而是确保它们从头开始出现在页面输出中，然后使用.hide()将其隐藏在$(document).ready之内。这样会更容易（因为您需要的是对隐藏元素的引用，并在必要时调用.show（））。这样，它不依赖于javascript流存在，启用和按预期运行，因为这种方式如果发生任何事情（异常抛出，cdn问题，无论如何），表单将回退到一个完全存在的版本，只是工作
如果您要使用很多这些“+”或“添加”按钮方案，我会创建原始字段的.clone()，将其删除（清除值，删除ID -attribute），并将其存储在局部变量中。然后从单击处理程序中克隆它，并将其放入您需要它的文档中。您可能还希望通过使添加按钮成为具有特定名称/值对的提交按钮来进行服务器端回退，服务器将其检测为非最终输入，在这种情况下，它将返回具有前置值的相同页面填补但有更多的领域。

Answer 6

根据jQuery – Dynamically Adding Form Elements在此博文Charlie Griefer上找到解决方案，您可以尝试以下方法：

<强>标记：

<div id="searchFields" class="control-group inlineForm">
<form id="myForm">
    <div id="input1" style="margin-bottom:4px;" class="clonedInput">
        <label for="regNr">Regnr</label>: <input type="text" name="regNr" placeholder="Regnr." size="6" maxlength="6" />
        <label for="poNr">PO.nr</label>: <input type="text" id="poNr" placeholder="PO.nr." size="12" maxlength="12">
    </div>

    <div>
        <input type="button" id="btnAdd" value="add another Reg field" />
        <input type="button" id="btnDel" value="remove fields" />
    </div>
    <input type="button" value="GET INFO" class="last" id="getBaseInf">
</form>
</div>

<强>的Javascript ：

$('#btnAdd').click(function() {
    var num     = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
    var newNum  = new Number(num + 1); // the numeric ID of the new input field being added

    // create the new element via clone(), and manipulate it's ID using newNum value  
    var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

    // manipulate the name/id values of the input inside the new element
    newElem.children(':first').attr('id', 'regNr' + newNum).attr('regNr', 'regNr' + newNum);

    // insert the new element after the last "duplicatable" input field
    $('#input' + num).after(newElem);

    // enable the "remove" button
    $('#btnDel').removeAttr('disabled');

    // business rule: you can only add 5 names
    if (newNum == 5)
        $('#btnAdd').attr('disabled','disabled');
});


$('#btnDel').click(function() {
     var num = $('.clonedInput').length;

    $('#input' + num).remove();     // remove the last element

    $('#btnAdd').attr('disabled',''); // enable the "add" button

    // if only one element remains, disable the "remove" button
    if (num-1 == 1)
          $('#btnDel').attr('disabled','disabled');
});

$('#btnDel').attr('disabled','disabled');

DEMO ：http://jsfiddle.net/chridam/qW9ra/

使用jQuery创建新的表单字段

6 个答案: