PHPが動作しない行を追加する（フォームリピータ）

Question

フォームリピータを使用して請求書を作成しています。請求書には、データベースから価格で提供される複数の商品があります。 私が製品を選択するとその価格は自動的に料金欄に表示され、割引やパーセンテージのような他の入力ボックスがあり、デフォルトでは0 0です。最初の行は非常にうまく動作します。しかし、私は別の製品を追加するために、次の行を生成するために、ボタンを追加するをクリックします。

次の行では、プルダウンから製品を選択できます。その手数料は表示されず、割引やパーセンテージなどの他の入力ボックスの値も消えます（デフォルト値は表示されません）。

ここは自分のHTMLコードです。

<div class="row"> 
    <div class="col-xs-3"> 
     <label for="single" class="control-label">Select Invoice Type</label> 
    </div> 
    <div class="col-xs-2">Fee</div> 
    <div class="col-xs-1">Quantity</div> 
    <div class="col-xs-1">Discount</div> 
    <div class="col-xs-2">Total</div> 
    <div class="col-xs-1">Doctor %</div> 
</div> 
<div class="mt-repeater"> 
    <div data-repeater-list="group-b"> 
     <div data-repeater-item class="row"> 
      <div class="col-xs-3"> 
       <div class="form-group"> 
        <select id="invoice" class="form-control" name="invoice"> 
         <option></option> 
         <?php 
          $select = mysqli_query(connection(), "select * from treatement"); 
          while($r = mysqli_fetch_array($select)) { 
           echo "<option value='$r[0]'>$r[name]</option>"; 
          } 
         ?> 
        </select> 
       </div> 
      </div> 
      <div class="col-xs-2"> 
       <div class="form-group"> 
        <input type="text" value="" class="form-control" placeholder="Fee" name="fees" id="fees"> 
       </div> 
      </div> 
      <div class="col-xs-1"> 
       <div class="form-group"> 
        <input type="text" class="form-control" value="1" name="quantity" > 
       </div> 
      </div> 
      <div class="col-xs-1"> 
       <div class="form-group"> 
        <input type="text" value="0" class="form-control" placeholder="Discount" name="discount"> 
       </div> 
      </div> 
      <div class="col-xs-2"> 
       <div class="form-group"> 
        <input type="text" value="0" class="form-control" placeholder="Total" readonly name="total"> 
       </div> 
      </div> 
      <div class="col-xs-2"> 
       <div class="form-group"> 
        <input type="text" value="0" class="form-control" placeholder="%" name="percentage"> 
       </div> 
      </div> 
      <div class="col-md-1"> 
       <a href="javascript:;" data-repeater-delete class="btn btn-danger"> 
       <i class="fa fa-close"></i> 
       </a> 
      </div> 
     </div> 
    </div> 
    <a href="javascript:;" data-repeater-create class="btn btn-info mt-repeater-add"> 
    <i class="fa fa-plus"></i> Add More 
    </a> 
    <br> 
    <br> 
</div> 

そして、私は各製品の料金を比較するためにjs関数を使用します。これは、箱に料金を表示するのに役立ちます。

$(document).ready(function() { 
    $("#invoice").change(function() { 
     var value = $(this).val(); 
     $.get("get_fees.php", { 
      id: value 
     }, function(data) { 
      $("#fees").val(data); 
     }) 
    }) 
}) 

Answer 1

お願いします。 IDは一意である必要があり、あなたはID（barmarコメントを参照してください）

<p id="test"></p> 
<p id="test"></p> 
<p id="test"></p> 

が

<p id="test1" class="test"></p> 
<p id="test2" class="test"></p> 
<p id="test3" class="test"></p> 

する必要があります代わりにクラスを使用する必要がありますidは一意である必要がありますので、私は、同じIDを使用していけない、ということができません。

• 1 idは1要素で使用する必要があります。
• 1クラスは、多くの要素

で使用することができますが、あなたはまだでこれをハックすることができます。あなたは常にあなたの最初のセレクタを変更する理由/ ：$('select[id="invoice"]')

と、新しいDOMを作成するようで、この行を変更することができます

$("#invoice").change(function() {

はUPDATE

$("body").on('change', 'select[id="invoice"]', function() {

になります最初のID =手数料。 （私はclosest()でそれを作る）親を取得し、その後、あなたはいけないので、あなたが

を変更したい特定のid =「手数料」を見つける：あなたは$('#fees').val()

を使用しているので、あなたが、ように指定する必要がありますあなたの親リピータを識別anyspecificクラスを持って、私は<div data-repeater-item class="row rowsdata">

でrowsdataクラスに

変更<div data-repeater-item class="row">を追加することを選択し、あなたのスクリプトは、この

のように見えます

$("body").on('change', 'select[id="invoice"]', function() { 
    var select = $(this); 
    $.get("get_fees.php", { 
     id: select.val() 
    }, function(data) { 
     select.closest('.rowsdata').find('input[id="fees"]').val(data); //if you still give id="fees" and dont have any class use this 
     //select.closest('.rowsdata').find('.fees').val(data); if you already give class="fees", use this 
    }); 
});