Динамический ввод не записан в массиве PHP

Question

Я делаю простое добавление элементов в программное обеспечение для инвентаризации, которое получает данные и добавляет в базу данных, используя динамические входные данные.

<div class="col-lg-6">
<form action="invoice_check.php" method="POST">

<div class="row">
<div class="table-responsive">

<table class="table table-striped table-bordered table-hover table-medicines">
<thead>
<tr>
<th>Name</th>
<th>MFR</th>
<th>Quantity</th>
<th>Batch</th>
<th>Expiry</th>
<th>MRP</th>
<th>DSC</th>
<th> </th>
</tr>
</thead>


<tbody>
<tr>
<td style="width:20%;"><div class="form-group"><input id="1"  class="form- 
control" placeholder="Name" type="text" name="mname[]"></input></div></td>
<td><div class="form-group"><input class="form-control"  
placeholder="Manufacturer" name="mfg[]"></div></td>
<td style="width:10%;"><div class="form-group"><input class="form-control" 
placeholder="Qty" name="qty[]"></div></td>
<td style="width:10%;"><div class="form-group"><input class="form-control" 
placeholder="Batch" name="batch[]"></div></td>
<td><div class="form-group"><input class="form-control" placeholder="MM/YY" 
id="cc" name="exp[]"></div></td>
<td style="width:10%;"><div class="form-group"><input class="form-control"  
placeholder="MRP" name="mrp[]"></div></td>
<td style="width:10%;"><div class="form-group"><input class="form-control" 
placeholder="DSC" name="dsc[]"></div></td>
<td>
-
</td>
</tr>

</tbody>
</table>
</div>
</div>
<input type="submit" class="btn btn-primary btn-lg btn-block">
</form>

У меня есть следующий jquery для добавления нового, который содержит новый набор ввода. Проблема в том, что хотя строка добавляется, при отправке массив не содержит данных добавленных элементов ввода.

Например, сколько бы я ни вводил входных данных, эти данные никогда не записываются, хотя я использовал массив для входных данных.

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

<script>
$(document).ready(function() {
var wrapper         = $(".table-medicines"); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID
var x=1;

$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    x++;
     $(wrapper).append('<tr> <td><div class="form-group"><input class="form-control" id="'+x+'" placeholder="Name" type="text" name="mname[]"/></div></td> <td><div class="form-group"><input class="form-control" placeholder="Manufacturer" name="mfg[]"></div></td>  <td><div class="form-group"><input class="form-control" placeholder="Qty" name="qty[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="Batch" name="batch[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="Expiry" name="exp[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="MRP" name="mrp[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="DSC" name="dsc[]"></div></td> <td> <a href="#" class="remove_field">  <button type="button" class="add_field_button btn btn-danger btn-circle"><i class="fa fa-times "></i></button></a> </td> </tr>'); //add input box
  });

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).closest('tr').remove(); x--;
})
});

Заранее спасибо.

Answer 1

Сначала, когда DOM загружается, вы не получите кнопку Add new, так как она генерирует внутри своего события self click. Таким образом, вы должны инициализировать его при загрузке. Все остальное правильно, за исключением нескольких незначительных изменений.

$(document).ready(function() {
var wrapper         = $(".table-medicines"); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID
var x=1;

$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    x++;
     $(wrapper).append('<tr> <td><div class="form-group"><input class="form-control" id="'+x+'" placeholder="Name" type="text" name="mname[]"/></div></td> <td><div class="form-group"><input class="form-control" placeholder="Manufacturer" name="mfg[]"></div></td>  <td><div class="form-group"><input class="form-control" placeholder="Qty" name="qty[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="Batch" name="batch[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="Expiry" name="exp[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="MRP" name="mrp[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="DSC" name="dsc[]"></div></td> <td> <button type="button" class="remove_field btn btn-danger btn-circle"><i class="fa fa-times "></i>Remove</button></td> </tr>'); //add input box
  });

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).closest('tr').remove(); x--;
})
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<div class="col-lg-6">
<form action="invoice_check.php" method="POST">
   <div class="row">
      <div class="table-responsive">
         <table class="table table-striped table-bordered table-hover table-medicines">
            <thead>
               <tr>
                  <th>Name</th>
                  <th>MFR</th>
                  <th>Quantity</th>
                  <th>Batch</th>
                  <th>Expiry</th>
                  <th>MRP</th>
                  <th>DSC</th>
                  <th> </th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td style="width:20%;">
                     <div class="form-group"><input id="1"  class="form- 
                        control" placeholder="Name" type="text" name="mname[]"></input></div>
                  </td>
                  <td>
                     <div class="form-group"><input class="form-control"  
                        placeholder="Manufacturer" name="mfg[]"></div>
                  </td>
                  <td style="width:10%;">
                     <div class="form-group"><input class="form-control" 
                        placeholder="Qty" name="qty[]"></div>
                  </td>
                  <td style="width:10%;">
                     <div class="form-group"><input class="form-control" 
                        placeholder="Batch" name="batch[]"></div>
                  </td>
                  <td>
                     <div class="form-group"><input class="form-control" placeholder="MM/YY" 
                        id="cc" name="exp[]"></div>
                  </td>
                  <td style="width:10%;">
                     <div class="form-group"><input class="form-control"  
                        placeholder="MRP" name="mrp[]"></div>
                  </td>
                  <td style="width:10%;">
                     <div class="form-group"><input class="form-control" 
                        placeholder="DSC" name="dsc[]"></div>
                  </td>
                  <td><button type="button" class="add_field_button btn btn-danger btn-circle"><i class="fa fa-times "></i>Add</button> </td>
               </tr>
            </tbody>
         </table>
      </div>
   </div>
   <input type="submit" class="btn btn-primary btn-lg btn-block">
</form>