Динамически добавлять поля формы с jquery, а не отправлять

Question

Мне удалось создать форму и заставить ее работать. Однако у меня есть проблема

Я получил эту Jquery от этого

http://jsfiddle.net/34rYv/25/

Все отлично работает, но когда я отправляю свои данные в TCPDF вновь созданной строке техника его подводит отправить, и среднее время я хочу добавить база данных также, пожалуйста, кто-нибудь знает ответ, который очень ценит. здесь мои коды

<script type="text/Javascript"> 
$(document).ready(function() { 
    $('#btnAdd').click(function() { 
     var num  = $('.clonedSection').length; 
     var newNum = new Number(num + 1); 

     var newSection = $('#pq_entry_' + num).clone().attr('id', 'pq_entry_' + newNum); 

     newSection.children(':first').children(':first').attr('id', 'quantity_' + newNum).attr('name', 'quantity_' + newNum); 
     newSection.children(':nth-child(2)').children(':first').attr('id', 'rcptdelvry_' + newNum).attr('name', 'rcptdelvry_' + newNum); 
     newSection.children(':nth-child(2)').children(':first').attr('id', 'weight_' + newNum).attr('name', 'weight_' + newNum); 
     newSection.children(':nth-child(2)').children(':first').attr('id', 'volume_' + newNum).attr('name', 'volume_' + newNum); 

     newSection.insertAfter('#pq_entry_' + num).last(); 

     $('#btnDel').prop('disabled',''); 

     if (newNum == 5) 
      $('#btnAdd').prop('disabled','disabled'); 
    }); 

    $('#btnDel').click(function() { 
     var num = $('.clonedSection').length; // how many "duplicatable" input fields we currently have 
     $('#pq_entry_' + num).remove();  // remove the last element 

     // enable the "add" button 
     $('#btnAdd').prop('disabled',''); 

     // if only one element remains, disable the "remove" button 
     if (num-1 == 1) 
      $('#btnDel').prop('disabled','disabled'); 
    }); 

    $('#btnDel').prop('disabled','disabled'); 
}); 
</script> 

Вот моя Html часть

<fieldset> 
     <ul id="pq_entry_1" class="clonedSection"> 
     <label class="textfield">QUANTITY 
     <li><input type="text" name="quantity_1" id="quantity_1"></li> 
     <br class="clear"> 
     </label> 

     <label class="textfield">TYPE<br> 
    <li><select name="rcptdelvry_1" id="rcptdelvry_1"> 
    <option value="">-- Please Select --</option> 
    <optgroup label="LCL CARGO"> 
    <option value="PACKAGES">PACKAGES</option> 
    <option value="CARTONS">CARTONS</option> 
    <option value="BALES">BALES</option> 
    <option value="BOX">BOX</option> 
    <option value="PALETTES">PALETTES</option> 
    <option value="CRATE">CRATE</option> 
    </optgroup> 
    <optgroup label="FULL CONTAINER"> 
    <option value="20' Bulk (with roof hatches)">20' Bulk (with roof hatches)</option> 
    <option value="20' Collapsible Flat Rack">20' Collapsible Flat Rack</option> 
    <option value="20' Dry">20' Dry</option> 
    <option value="20' Flat Rack">20' Flat Rack</option> 
    <option value="20' Highvent w/o roof hatches">20' Highvent w/o roof hatches</option> 
    <option value="20' Open Top">20' Open Top</option> 
    <option value="20' Porthole (conair)">20' Porthole (conair)</option> 
    <option value="20' Reefer">20' Reefer</option> 
    <option value="20' Tank">20' Tank</option> 
    <option value="40' Artificial Tweendeck">40' Artificial Tweendeck</option> 
    <option value="40' Collapsible Flat Rack">40' Collapsible Flat Rack</option> 
    <option value="40' Dry">40' Dry</option> 
    <option value="40' Flat Rack">40' Flat Rack</option> 
    <option value="40' High Cube">40' High Cube</option> 
    <option value="40' High Cube Reefer">40' High Cube Reefer</option> 
    <option value="40' Open Top">40' Open Top</option> 
    <option value="40' Starvent (9'6)">40' Starvent (9'6)</option> 
    <option value="40' Tank">40' Tank</option> 
    <option value="45' High Cube">45' High Cube</option> 
    <option value="45' High Cube Reefer">45' High Cube Reefer</option> 
    </optgroup> 
    </select></li> 
     <br class="clear"> 
     </label> 

     <label class="textfield">WEIGHT (kg per container) 
     <li><input type="tel" name="weight_1" id="weight_1"></li> 
     <br class="clear"> 
     </label> 

     <label class="textfield">VOLUME (cbm): 
     <li><input type="tel" name="volume_1" id="volume_1"></li> 
     <br class="clear"> 
     </label> 
     </ul> 

     </fieldset> 
     <input type='button' id='btnAdd' size="15" value='add another row' /> 
<input type='button' id='btnDel' value='delete row' /> 
     </div> 
     </div> 

Вот моя TCPDF часть

<td width="0" height="0"> 
: {$_POST['quantity_1']}X{$_POST['rcptdelvry_1']}{$_POST['quantity_2']}X{$_POST['rcptdelvry_2']} 
</td> 

Answer 1

Отправка формы с Стандартная кнопка 'submit' не будет работать в этом случае. Кнопка отправки не принимает поля формы в учетной записи, созданные после загрузки страницы.

Вам необходимо написать обработчик отправки, который сериализует ваши данные и отправляет их на сервер.

попробовать что-то вроде этого:

$('#yourFormID').on('submit', function(e) { 
    //prevent the default submithandling 
    e.preventDefault(); 
    //send the data of 'this' (the matched form) to yourURL 
    $.post('yourURL', $(this).serialize()); 
}); 

стороны сервера теперь есть переменные $ _POST заполнен с ключами и значениями.

Вы также можете просмотреть данные, отправляемые в firebug или любой другой инструмент webdeveloper.

EDIT:

Я изменил вашу скрипку, чтобы работать с моим кодом:

http://jsfiddle.net/34rYv/67/

Я завернул <form></form> вокруг ваших входов и добавил <input type='submit' /> кнопку