Question

我正在向表单动态添加SELECT元素，然后使用JQuery Form Plugin为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>

上面的代码是正在使用的表单的片段。然后我按照以下

动态添加一些额外的选择元素

 $(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');
  }

问题是元素＆＃34;追加＆＃34;形式，而不是div＆＃34; .field_wrapper＆＃34;有意的（因此出现在预期的DIV之外）。如果省略appendTo但是select不再链接到表单，我可以正确格式化。

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

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

Answer 1

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

您可能还想取消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
});

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

1 个答案: