javascript - 使用 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

在这种情况下，使用标准“提交”按钮提交表单将不起作用。提交按钮不考虑页面加载后创建的表单域。

您必须编写一个提交处理程序来序列化您的数据并将其发送到服务器。

尝试这样的事情:

$('#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 或任何其他网络开发工具中发送的数据。

编辑:

我已经改变了你的 fiddle 来使用我的代码:

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

我已经包装了一个 <form></form>围绕您的输入并添加一个 <input type='submit' />按钮