jquery表单ajax提交上的重复表单元素

Question

我正在向表单动态添加 SELECT 元素，然后使用 JQuery 表单插件提交 ajax 表单提交。我想（1）将 SELECT 添加到表单中，（2）将 SELECT 放在 DIV 中，（3）使用 ajax 调用正确提交表单。这三个我似乎都做不到！

<form name="mainForm" id="mainForm" method="POST" action="fellowRight.php">
  ...various working form elements

<div class="field_wrapper">
  </div>

  </form>

上面的代码是一个正在使用的表单的sn-p。然后我按照下面动态添加一些额外的选择元素

 $(addFormElementButton).click(function(){ 
     var fieldHTML = '<select required name="ABC" ><option value="LT">Left</option><option selected value="RT">Right</option></select>';          
     $('.field_wrapper'); .append(fieldHTML); // Add field html
     $('select[name=ABC]').appendTo('#mainForm');
  }

问题是元素“附加到”表单，而不是预期的 div“.field_wrapper”（因此出现在预期的 DIV 之外）。如果我省略 appendTo，我可以让它正确格式化，但是选择不再链接到表单。

如果我省略 AppendTo 代码，而是在 <select> 元素中添加一个 form="mainForm" 调用，它的格式正确并正确提交。但是，然后我在通过 JQUERY FORM (.ajaxForm) 提交的表单数据中得到了这个特定 SELECT 元素的重复。

有没有办法在不使用 appendTo 或 form= 的情况下将 SELECT 元素链接到表单，或者我应该忘记使用 Jquery 表单

Answer 1

只需在.field_wrapper 中插入select，它已经在表单中。

您可能还想取消addFormElementButton 上的点击事件，因为如果它是button，它可能会自动提交表单。

$(addFormElementButton).click(function(e) { 
     e.preventDefault();
     var fieldHTML = '<select required name="ABC" ><option value="LT">Left</option><option selected value="RT">Right</option></select>';          
     $('.field_wrapper').append(fieldHTML);  //<-there was a typo here
});