Question

我有一个类似下面的表单，我希望当用户填写输入文本，然后自动添加另一个输入文本，此操作继续。

html示例是：

<form method="post" action="http://localhost/save" class="save">
 <fieldset>

  <div>
   <label>Text 1:</label><br>
   <input type="text" value="" name="text1" id="text" class="input-tags">
  </div>

  <div>
   <label>Text 2:</label><br>
   <input type="text" value="" name="text2" id="text" class="input-tags">
  </div>

  <div>
   <input type="submit" value="Save" class="elgg-button elgg-button-submit">
  </div><!-- developers:end forms/application_description/save -->
 </fieldset>
</form>

如何用jQuery做到这一点？

所以，用较少的话说的问题是：如何仅在填充text2时显示text1？

Answer 1

这样的事情会起作用。它非常粗糙，但我测试过，它工作正常

$(document).ready(function(){
    $("#testForm").append($("<input type='text'/>"));

    $("#testForm").on("blur", 'input', function(){
        $("#testForm").append($("<input type='text'/>"));
    });
});

这是我小提琴的链接。你可以分支并玩它。

http://jsfiddle.net/ricobano/bxEAb/

Answer 2

是的，您可以动态地将字段添加到您选择的表单或整个HTML区域。您需要查看的jQuery函数是prepend，prependTo，append或appendTo。他们都以略微不同的方式做同样的事情。

您可以使用创建的文本字段的数量保留变量，并在每次添加时增加它。如果你为你的div添加一个id属性会更容易。例如，在提交按钮周围的div中，您添加了如下ID：

<div id="submit-div">

你可以这样说：

function addField() {
    n++;
    '<div><label>Text ' + n + ': </label><input type="text" name="text' + n + '" class="input-tags"></div>'.prependTo('#submit-div');
}

如何以及何时调用此函数取决于您，但您可以将其附加到最后一个输入字段的blur事件。然后，当您创建新的时，可以从上一个输入字段中删除事件处理程序。

在表单内动态添加文本字段

2 个答案: