2017-12-27 1268 views
0

我使用表單中繼器創建發票。發票有多個產品來自數據庫和價格。 當我選擇產品時,其自動價格出現在費用框中,並且還有其他輸入框,如折扣和百分比,默認值爲0 0。第一行工作得很好。但是當我點擊添加更多按鈕來生成下一行添加另一個產品。Php不工作添加更多行(中繼器)

在下一行中,我可以從下拉列表中選擇產品。但其費用沒有出現,其他輸入框值如折扣和百分比也消失(他們沒有顯示任何默認值。)

這是我的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); 
     }) 
    }) 
}) 
+1

您是否在每一行使用'id =「invoice」'? ID必須是唯一的,您應該使用類而不是ID。然後請參閱[動態創建的元素上的事件綁定](https:// stackoverflow。com/questions/203198/event-binding-on-dynamic-created-elements),以便爲它們綁定事件處理程序。 – Barmar

+0

注意:'mysqli'的面向對象的接口明顯不那麼冗長,使得代碼更易於閱讀和審計,並且不容易與陳舊的'mysql_query'接口混淆。在你過於投入程序風格之前,它是值得轉換的。例如:'$ db = new mysqli(...)'和'$ db-> prepare(「...」)過程接口是PHP4時代的一個神器,當引入mysqli API時,不應該在新的碼。 – tadman

回答

2

請..不要使用這樣的ID。 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() {

成爲

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

UPDATE: 爲什麼你總是改變你的第一選擇/對第一個id =費用。因爲你使用$('#fees').val()

必須指定,具有:獲取父(我closest()使它),然後找到您要更改

,因爲你不特定的ID =「費」有識別你的父母中繼anyspecific類,我選擇添加rowsdata類

變化<div data-repeater-item class="row"><div data-repeater-item class="row rowsdata">

和你的腳本將看起來像這樣

$("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 
    }); 
}); 
+0

謝謝,當我替換腳本行並將id =「費用」更改爲課程時,它會起作用。但是,當我在第2或第3行更改產品時,它將上述行的費用更改爲與上一行相同。你可以請幫我這個 –

+0

看到我的更新 – plonknimbuzz

+0

以上謝謝。這很好。 :) –