동적으로 추가 된 입력 필드가 게시되지 않습니까?

Question

아래 코드는 사용자가 작성할 수있는 입력 필드가 포함 된 송장 행으로 구성되어 있습니다. 초기 입력 라인 수는 20입니다. 사용자는 종종 "라인 추가"버튼을 클릭하여 인보이스에 라인을 더 추가해야합니다. 이 버튼을 클릭 할 때마다 Javascript를 사용하여 인보이스에 줄을 추가합니다.

문제는 양식이 제출되면 처음 20 줄만 제출 된 것입니다. 모든 javascript 추가 송장 행은 무시되고 게시되지 않습니다.

나는 꽤 오랫동안이 문제를 해결하기 위해 노력 해왔다. 나는이 문제를 올바르게 구현하는 방법을 안내 할 사람이 있는지 궁금해하고 있었다.

미리 감사드립니다.

마크 업/PHP

 <?php 
       for($i=0; $i < 20; $i++){ 
        echo ' 
        <div class="invoice-line"> 
         <div class="prod-id-cell"><input name="rows['.$i.'][id]" type="text" class="prod-id-input"> 
          <div class="smart-suggestions"> 
            <!-- RESULT SUGGESTIONS WILL POPULATE HERE -->        </div> 
         </div> 
         <div class="prod-name-cell"> 
          <input type="text" name="rows['.$i.'][name]" class="prod-name-input"/>         <div class="smart-suggestions"> 
              <!-- RESULT SUGGESTIONS WILL POPULATE HERE --> 
            </div> 
           </div> 
         <div class="price-cell"><input name="rows['.$i.'][price]" class="price-input" type="text" /></div> 
         <div class="quantity-cell"><input name="rows['.$i.'][quantity]" type="text" class="quantity-input"></div> 
         <div class="unit-price-cell"><input name="rows['.$i.'][unit-price]" class="unit-price-input" type="text" /></div> 
         <div class="num-kits-cell"><input name="rows['.$i.'][num-kits]" class="num-kits-input" type="text" /></div> 
         <div class="amount-cell"><input name="rows['.$i.'][amount]" class="amount-input" type="text" readonly="readonly" /></div> 
        </div>'; 
       } 
     ?> 

자바 스크립트 당신이 그들을 사용하지 않기 때문에 값이 게시되지 않습니다

//**ADD 5 LINES**// 
     $('.invoice-links div').on("click", ".add-five-trigger", function(){ 
      for(var i=0; i < 5; i++){ 
       var invoiceLine = $(".invoice-line").first().clone(true, true); 
       $(invoiceLine).insertAfter(".invoice-line:last"); 
       $(".invoice-line:last").find('input').val('').attr('disabled','disabled'); 
      } 
     });  

Answer 1

복제 된 입력의 name 특성을 변경하는 것을 잊어 버렸습니다. 이전 필드를 덮어 씁니다.

사용이 :

var invoiceLine = $(".invoice-line").last(); 
var newLine = invoiceLine.clone(true, true); 
invoiceLine.after(newLine); 
newLine.find('input').each(function() { 
    if (this.type == "text") 
     this.value = ""; 
    this.name = this.name.replace(/rows\[(\d+)\]/, function(m, num) { 
     return "rows["+(+num+1)+"]"; 
    }); 
    this.disabled = true; 
}); 

Answer 2

. 속성이 비활성화 된 입력 요소는 게시되지 않습니다.

또한 요소에 고유 한 ID와 이름이 있는지 확인하십시오. 이름이없는 요소는 게시되지 않습니다.

Answer 3

당신은 당신이 만드는 요소에 새 이름을 부여하지 않습니다. 당신은 또한 그들을 비활성화하고 있습니다.

$(".invoice-line:last").find('input').val('').attr('disabled','disabled'); 

비활성화 된 양식 입력은 절대로 양식과 함께 제출되지 않습니다.