2016-05-22 33 views
0

我動態地將SELECT元素添加到表單中,然後使用JQuery表單插件提交ajax表單提交。我想(1)將SELECT添加到表單中,(2)將SELECT放入DIV中,(3)使用ajax調用正確提交表單。我似乎無法做到這三件事!jquery form上的表單元素重複提交

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

的問題是,元素「appendto」的形式,而不是作爲intented在div「.field_wrapper」(並因此出現預期的DIV之外)。如果我省略了appendTo,但是select不再鏈接到表單,我可以正確地設置它的格式。

如果我省略了AppendTo代碼,而是在<select>元素中添加了form="mainForm"調用,則它會正確格式並正確提交。然而,然後我通過JQUERY FORM(.ajaxForm)提交的表單數據中重複了這個特定的SELECT元素。

有沒有辦法不使用appendToform= SELECT元素鏈接到窗體或我應該忘了使用jQuery形式

+0

'$('。field_wrapper'); .append(fieldHTML);'我認爲這是不正確的語法 –

+0

只是在這裏輸入錯誤,語法在真正的代碼中是正確的,thx – kidnim

回答

0

只需插入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 
}); 
+0

錯誤在真正的代碼中是正確的。不幸的是,如果我不附加形式或添加名稱='mainform',儘管在窗體和/窗體標籤內,數據不會POST – kidnim

+0

好吧,那麼你將不得不發佈你如何發送表單。張貼ajax呼叫部分。 – Gabriel