動態字段不是阿賈克斯後提交某些值

Question

讓我先說三件事情：

0）這可能是實現我的目標一個可怕的方式，但它是我能想到的最好的辦法。有了這個說法，我願意在清理下面顯示的代碼方面提供任何建議。

1.）此問題可能與綁定到DOM的對象而不是有關。

2.）我不知道這實際上是什麼意思。儘管無數個小時google搜索WTF並不意味着DOM ...

這裏是我的問題：當我POST如下所示的形式，它留下了幾個值從一第一形式

我有一個看起來像這樣的表單：

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

} 

一切正常EXCEPT，當我提交表單，它忽略了從幾個值非常第一形式

下面是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= 

我提交表單（S）使用此代碼的結果：

$('#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>