элементы дублирующей формы на форме jquery ajax submission

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

Проблема заключается в том, что элементы «appendto» форма, а не ДИВ «.field_wrapper», как intented (и, следовательно, появляются за пределами предполагаемого DIV). Я могу заставить его правильно форматировать, если я опускаю appendTo, но потом выбор больше не связан с формой.

Если я опускаю код AppendTo и вместо этого добавляю вызов form="mainForm" в элементе <select>, он правильно формирует и отправляет правильно. ОДНАКО, тогда я получаю дублирование этого конкретного элемента SELECT в моих данных формы, представленных через JQUERY FORM (.ajaxForm).

Есть ли способ связать ВЫБЕРИТЕ элемент формы без использования appendTo или form= или я должен просто забыть об использовании формы Jquery

Answer 1

Просто вставьте select внутри .field_wrapper, это уже внутри формы.

Возможно, вы также захотите отменить событие click на 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 
});