2

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

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

我不知道这是如何完成的（可以完成）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 和单独的删除链接. 另外，如何将生成的字段设置为只读并在它们出现在篮子中时对其进行动画处理？

4

6 回答 6

0

我想，你可能只是在寻找这样的东西。

于 2012-10-22T12:58:19.003 回答
0

只需向跨度添加一个点击观察器。检查这个小提琴：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>
​
于 2012-10-22T12:53:12.303 回答
0

你可以做到这一点，使用jquery append 方法。

在这里，我留下了一些示例的链接：

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

于 2012-10-22T12:53:55.807 回答
0

我会做这样的事情：

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

于 2012-10-22T13:06:11.307 回答
0

要使用 jQuery 添加任何 HTML，您最终将调用.append()或其变体之一，例如.before、.appendTo等。

这些可以被赋予原始的 HTML 字符串，但除非你有一个准备好的 HTML 模板，否则不要使用字符串连接来构建你的 HTM。这是脆弱和不安全的。相反，直接使用jQuery()创建元素，如下所示：

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

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

与此方案相关的其他一些最佳实践：

  • 如果您要动态地显示新的表单元素（而不是为现有字段添加更多附加字段），最好不要使用 JavaScript 创建这些元素。相反，请确保它们从一开始就出现在页面输出中，然后$(document).ready使用.hide()隐藏它们。这样会容易得多（因为您只需要引用隐藏元素，并在必要时调用 .show() ）。这样，它不依赖于存在、启用和按预期运行的 javascript 流，因为这样，如果在此过程中发生任何事情（抛出异常、cdn 问题等），表单将回退到一个完全存在的版本，只是工作.

  • 如果您将有很多这些“+”或“添加”按钮场景，我会创建一个原始字段的.clone()，剥离它（清除值，删除 id 属性），然后存储它在局部变量中。然后从单击处理程序中克隆它，并将其放入您需要的文档中。您可能还希望通过使添加按钮成为具有特定名称/值对的提交按钮来获得服务器端后备，服务器将其检测为非最终输入，在这种情况下，它将返回具有值的相同页面 pre-填充但有更多字段。

于 2012-10-22T13:14:51.313 回答
0

基于此博客文章jQuery - 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');​

演示：http: //jsfiddle.net/chridam/qW9ra/

于 2012-10-22T13:15:06.727 回答