doppelte Formularelemente auf JQuery Formular AJAX-Übermittlung

Question

Ich bin ein Element SELECT dynamisch zu einem Formular hinzufügen, dann mit JQuery Form Plugin für eine AJAX-Formular senden einreichen. Ich möchte (1) das SELECT zum Formular hinzufügen, (2) das SELECT in ein DIV setzen und (3) das Formular unter Verwendung eines Ajax-Aufrufs richtig einreichen. Ich kann nicht alle drei machen!

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

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

    </form> 

Der obige Code ist ein Snippet eines verwendeten Formulars. Ich füge dann einige zusätzliche Auswahlelemente dynamisch wie pro unten

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

Das Problem ist, dass die Elemente „appendto“ die Form, nicht die div „.field_wrapper“ als intented (und damit außerhalb des beabsichtigten DIV erscheinen). Ich kann es korrekt formatieren, wenn ich das appendTo weglasse, aber dann ist die Auswahl nicht mehr mit dem Formular verknüpft.

Wenn ich den AppendTo-Code weglasse und stattdessen einen form="mainForm" Aufruf im <select> Element hinzufüge, formatiert er richtig und reicht richtig ein. JEDOCH, dann bekomme ich eine Duplizierung dieses spezifischen SELECT-Elements in meinen Formulardaten, die über JQUERY FORM (.ajaxForm) übermittelt werden.

Gibt es einen Weg, um das SELECT-Element in das Formular zu verbinden, ohne appendTo oder form= zu verwenden oder soll ich nur vergessen, über die Verwendung von JQuery Formular

Answer 1

Legen Sie einfach die select innerhalb .field_wrapper, ist es bereits in der Form.

Sie können das Klickereignis auch auf addFormElementButton abbrechen, denn wenn es sich um eine button handelt, wird das Formular möglicherweise automatisch gesendet.

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