Question

首先我要说三件事：

0。）这可能是实现我的目标的可怕方式，但这是我能想到的最佳方式。话虽如此，我对于清理下面显示的代码方面的任何建议持开放态度。

1。）这个问题可能与绑定到DOM的对象有关。

2.）我不知道这究竟意味着什么。尽管无数小时谷歌搜索WTF，但DOM意味着......

这是我的问题：当我发布下面显示的表单时，它会从第一个表单中删除一些值

我的表格看起来像这样：

<div class="col-md-8" id="hoursdetailsdiv">
    <form id="hoursdetails_1" class="form-inline totalform" role="form" >
        <div class="form-group">
            <input type="hidden" class="form-control" id="ps_serial_pk_1" placeholder="serial pk" readonly>
            <input type="hidden" class="form-control" id="placeholder_employee_1" name="placeholder_employee_1" placeholder="employee_fk" readonly>
            <input type="hidden" class="form-control" id="placeholder_date_1" name="placeholder_date_1" placeholder="date from top" readonly>
            <input type="hidden" class="form-control" id="ps_function_pk_1" name="ps_function_pk_1" placeholder="ps_function_pk_1" readonly>
        </div>

        <div class="form-group">
            <input type="text" class="form-control" id="ps_serialNumber_1" placeholder="serial or job number" required>
            <input type="text" class="form-control" id="ps_model_1" tabindex="-1" placeholder="Model" readonly required>
            <input type="text" class="form-control" id="daps_hours_1" name="daps_hours_1" placeholder="Hours" required>
            <input type="text" class="form-control" id="ps_function_1" placeholder="Function" required>
        </div>
    </form>
</div><!--/hoursdetails-->

<button type="button" id="addbutton" name="addbutton"class="btn btn-default">Add Row</button>
<button type="button" id="submitForm" name="submitForm" class="btn btn-warning" >Submit Entry</button>

其中一些字段是自动完成的，它返回多个值（用于填充隐藏字段）。

'addbutton'按钮克隆此表单，并将其重命名为hoursdetails_＃，其中＃表示递增值。

以下是克隆表单的代码：

$(function(){
    var template = $('#hoursdetailsdiv .form-inline:first').clone();
    var detailsCount = 1;
    window.addDetails = function(){
        detailsCount++;
        var forminline = template.clone().find(':input').each(function(){
            var newId = this.id.substring(0, this.id.length-1) + detailsCount;
            $(this).prev().attr('for', newId); // update label for
            this.name = this.id = newId; // update id and name (assume the same)
        }).end()
        .attr('id', 'hoursdetails_' + detailsCount)
        .appendTo('#hoursdetailsdiv');

        //add our existing static data to the new fields (employee id and date)
        $('#placeholder_employee_'+detailsCount).val($('#placeholder_employee_1').val())
        $('#placeholder_date_'+detailsCount).val($('#placeholder_date_1').val())

        //now put the focus on the new input field
        $('#ps_serialNumber_'+detailsCount).focus();
        injectNewLookup(detailsCount);
    }

});

在克隆函数（injectNewLookup（））结束时调用的函数在这里。在玩了一些之后，我发现我需要这样做才能使新的自动填充字段正常工作

function injectNewLookup(curID){

    //rebind events to dynamic elements
      $('#ps_serialNumber_'+curID).autocomplete({
        source: "mysql_lookups/p_lookup.php",
        autoFocus: true,
        minLength: 4,
        select: function(event, ui) {
          $('#ps_serialNumber_'+curID).val(ui.item.ord_no);
          $('#ps_model_'+curID).val(ui.item.plant_name);
          $('#ps_serial_pk_'+curID).val(ui.item.ps_fk);
        }
      });

      $("#ps_function_"+curID).autocomplete(
      {
        source: "mysql_lookups/f_lookup.php",
        autoFocus: true,
        minLength: 2,
        select: function(event, ui) {
          $('#ps_function_'+curID).val(ui.item.item_no);
          $('#ps_function_pk_'+curID).val(ui.item.function_pk);
        }
      });

}

一切正常但是，当我提交表单时，它会从第一个表单中遗漏一些值

以下是console.log

的结果

placeholder_employee_1=&placeholder_date_1=&ps_function_pk_1=&daps_hours_1=
ps_serial_pk_2=&placeholder_employee_2=&placeholder_date_2=&ps_function_pk_2=&ps_serialNumber_2=&ps_model_2=&daps_hours_2=&ps_function_2=

我正在使用以下代码提交表单：

$('#submitForm').on('click', function () {
    $('Form[id^=hoursdetails_]').each(function () {
        console.log($(this).serialize());
        //post_form_data($(this).serialize());
    });
});

function post_form_data(data) {
    $.ajax({
        type: 'POST',
        url: 'submits.php',
        data: data,
        beforeSend: function(){//alert(data)
        },
        success: function (data, textStatus) {
            //debugging use only
            $("#target").append(data);
        },
        error: function () {}
    });
}

总之，我的问题是：为什么 FIRST 表单中的某些字段不在帖子字符串之外？我该如何解决？

感谢您的帮助！

Answer 1

某些输入元素没有名称属性，因此无法提交。克隆克隆脚本时，为每个克隆脚本设置名称，以便它适用于每个克隆的表单。缺少字段必须

ps_serial_pk_1
ps_serialNumber_1
ps_model_1
ps_function_1

将表单代码更改为

<div class="col-md-8" id="hoursdetailsdiv">
    <form id="hoursdetails_1" class="form-inline totalform" role="form" >
        <div class="form-group">
            <input type="hidden" class="form-control" id="ps_serial_pk_1" name="ps_serial_pk_1" placeholder="serial pk" readonly>
            <input type="hidden" class="form-control" id="placeholder_employee_1" name="placeholder_employee_1" placeholder="employee_fk" readonly>
            <input type="hidden" class="form-control" id="placeholder_date_1" name="placeholder_date_1" placeholder="date from top" readonly>
            <input type="hidden" class="form-control" id="ps_function_pk_1" name="ps_function_pk_1" placeholder="ps_function_pk_1" readonly>
        </div>

        <div class="form-group">
            <input type="text" class="form-control" id="ps_serialNumber_1" name="ps_serialNumber_1" placeholder="serial or job number" required>
            <input type="text" class="form-control" id="ps_model_1" name="ps_model_1" tabindex="-1" placeholder="Model" readonly required>
            <input type="text" class="form-control" id="daps_hours_1" name="daps_hours_1" placeholder="Hours" required>
            <input type="text" class="form-control" id="ps_function_1" name="ps_function_1" placeholder="Function" required>
        </div>
    </form>
</div><!--/hoursdetails-->

<button type="button" id="addbutton" name="addbutton"class="btn btn-default">Add Row</button>
<button type="button" id="submitForm" name="submitForm" class="btn btn-warning" >Submit Entry</button>

动态字段未在ajax帖子上提交某些值

1 个答案: