0

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

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的填充？

4

2 回答 2

2

something like this would work. Its pretty rough but ive tested and it works fine

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

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

Heres a link to my fiddle. You can branch off and have a play with it.

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

于 2013-10-03T13:19:42.607 回答
1

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

您可以使用创建的文本字段的计数来保留一个变量，并在每次添加时递增它。如果您将 id 属性添加到您的 div 会更容易。例如，在您的提交按钮周围的 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');
}

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

于 2013-10-03T13:26:02.867 回答