Question

由于我无法在表单内部使用div，我想知道如何在不重新加载页面或重写表单的情况下在表单中间添加新字段（我不能在这里使用.append()）？（使用jQuery）

编辑：这是HTML：

<form id="form-0" name="0">
<b>what is bla?</b><br>
<input type="radio" name="answerN" value="0"> aaa <br>
<input type="radio" name="answerN" value="1"> bbb <br>
<input type="radio" name="answerN" value="2"> ccc <br>
<input type="radio" name="answerN" value="3"> ddd <br>
//This is where I want to dynamically add the new radio or text line

<input type="submit" value="Submit your answer">
//but HERE is where .append() will put it!

</form>

Answer 1

这个线程似乎令人困惑的是：

之间的区别

$('.selector').append("<input type='text'/>");

将目标元素追加为.selector的子元素。

和

$("<input type='text' />").appendTo('.selector');

将目标元素追加为.selector的子元素。

注意目标元素的位置＆amp;使用不同方法时.selector会发生变化。

你想要做的是：

$(function() {

  // append input control at start of form
  $("<input type='text' value='' />")
     .attr("id", "myfieldid")
     .attr("name", "myfieldid")
     .prependTo("#form-0");

  // OR

  // append input control at end of form
  $("<input type='text' value='' />")
     .attr("id", "myfieldid")
     .attr("name", "myfieldid")
     .appendTo("#form-0");

  // OR

  // see .after() or .before() in the api.jquery.com library

});

Answer 2

这将在输入字段后面插入一个id为“password”的新元素。

$(document).ready(function(){
  var newInput = $("<input name='new_field' type='text'>");
  $('input#password').after(newInput);
});

不确定这是否能解答您的问题。

Answer 3

您可以使用append和appendTo等方法添加任何类型的HTML：

jQuery manipulation methods

示例：

$('form#someform').append('<input type="text" name="something" id="something" />');

Answer 4

这样的事可能有用：

<script type="text/javascript">
$(document).ready(function(){
    var $input = $("<input name='myField' type='text'>");
    $('#section2').append($input);
});
</script>

<form>
    <div id="section1"><!-- some controls--></div>
    <div id="section2"><!-- for dynamic controls--></div>
</form>

Answer 5

使用附加到Chrome中的FORM的框架集ID的appendTo似乎存在错误。直接用div交换属性类型，它可以工作。

使用jQuery动态添加HTML表单字段

5 个答案: