0

我正在向表单动态添加 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');
  }

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

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

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

4

1 回答 1

0

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

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

$(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
});
于 2016-05-22T06:33:54.900 回答