多兩個輸入和通過的jQuery

Question

動態生成的輸入我有這樣的形式，這是我的佈局：

我當用戶輸入的數量的總輸入=數量*價格要。

我的觀點

<?php $form=array('id'=>'myform');?> 
    <?php echo form_open('Order/submit',$form);?> 
     <div class="panel panel-default"> 
      <div class="panel-heading">Customer Details</div> 
      <div class="panel-body"> 
       <div class="col-xs-3"> 
         <select class="selectpicker" data-show-subtext="true" data-live-search="true" name="customer_name"> 
          <?php foreach ($customerdata as $c): 
           echo "<option value ='$c->c_id'>" . $c->c_name . "</option>"; 
          endforeach; 
          ?> 
         </select> 
       </div> 
       <div class="col-xs-3"> 
         <input type="text" class="form-control" name="invoice_number" placeholder="Invoice Number"/> 
       </div> 
       <div class="col-xs-3"> 
         <input type="text" class="form-control" name="branch" placeholder="Branch"/> 
       </div> 
       <div class="col-xs-3"> 
         <select class="selectpicker" data-show-subtext="true" data-live-search="true" name="payment_term""> 
          <option value="cash">Cash</option> 
          <option value="bank">Bank</option> 
          <option value="other">Other</option> 
         </select> 
       </div> 
      </div><!--customer panel-Body--> 
      <div class="panel-heading">Invoice Details 
      </div> 

      <div class="panel-body"> 

       <div id="education_fields"> 


       <div class="col-sm-3 nopadding"> 
        <div class="form-group"> 
         <select class="selectpicker" data-show-subtext="true" data-live-search="true" name="select_product[]"> 
          <option></option> 
          <?php 
          foreach($order as $row): 
           echo"<option data-price='$row->p_price' value ='$row->p_id'>".$row->p_name. "</option>"; 
          endforeach; 
          ?> 
         </select> 
        </div> 
       </div> 
       <div class="col-sm-3 nopadding"> 
        <div class="form-group"> 
         <input type="text" class="form-control qty" name="qty[]" value="" placeholder="Quantity"> 
        </div> 
       </div> 
       <div class="col-sm-3 nopadding"> 
        <div class="form-group"> 
         <input type="text" class="form-control price" name="price[]" value="" placeholder="Price"> 
        </div> 
       </div> 

       <div class="col-sm-3 nopadding"> 
        <div class="form-group"> 
         <div class="input-group"> 
           <input type="text" class="form-control total" name="total[]" value="" placeholder="Total"> 
          <div class="input-group-btn"> 
           <button class="btn btn-success" type="button" onclick="education_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="clear"></div> 
       </div> 

      </div> 
      <div class="panel-footer"><small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another product field :)</small>, <small>Press <span class="glyphicon glyphicon-minus gs"></span> to remove the last product :)</small></div> 
     </div> 
     <button type="submit" class="btn btn-primary center-block">Checkout</button> 
    <?php echo form_close();?> 

這是我第一次jQuery和所使用的+按鈕

<script> 

var room = 0; 
function education_fields() { 

    room++; 
    var objTo = document.getElementById('education_fields'); 
    var divtest = document.createElement("div"); 
    divtest.setAttribute("class", "form-group removeclass"+room); 
    var rdiv = 'removeclass'+room; 
    var medo='<div class="col-sm-3 nopadding"><div class="form-group"><select class="selectpicker" data-show-subtext="true" data-live-search="true" name="select_product[]"><option></option><?php foreach($order as $row){ ?><option data-price="<?php echo$row->p_price;?>" value ="<?php echo $row->p_id; ?>"><?php echo $row->p_name; ?></option><?php } ?></select></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" name="qty[]" value="" placeholder="Quantity"></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control price" name="price[]" value="" placeholder="Price"></div></div><div class="col-sm-3 nopadding"><div class="form-group"><div class="input-group"> <input class="form-control" name="total[]" placeholder="Total"/><div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="remove_education_fields('+ room +');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div class="clear"></div>'; 

    divtest.innerHTML = medo; 
    objTo.appendChild(divtest); 
    $('select').selectpicker(); 
} 
function remove_education_fields(rid) { 
    $('.removeclass'+rid).remove(); 
} 
</script> 

生成一個新的行和這第二jQuery的用於從下拉式菜單獲得產品價格屬性並將其添加到價格輸入中。

<script> 
function set_price(slc) { 
    var price = slc.find(':selected').attr('data-price'); 
    slc.parent().parent().next().next().find('.price').val(price); 
} 
$('#education_fields').on('change','select.selectpicker',function(){ 
    set_price($(this)); 
}); 
</script> 

Answer 1

var sample = $('#sample').html(); 
 

 
$('#sample').on('click', '.generate', function() { 
 
    $('#sample').append(sample); 
 
}); 
 

 
$('#sample').on('change', 'select.selectpicker', function() { 
 
    
 
    // keyword this is your current select element 
 
    var select = $(this); 
 

 
    // each group of inputs share a common .form element, so use that to 
 
    // look up for closest parent .form, then down for input[name="price[]"] 
 
    // and set the input's value 
 
    select.closest('.form').find('[name^=price]').val(
 
    select.find('option:selected').data('price') 
 
    
 
    // trigger input's keyup event (*) 
 
).keyup(); 
 
    
 
}); 
 

 
// (*) note: input[type=text]'s onchange event triggers only after it loses focus; we'll use keyup event instead 
 

 
// create onkeyup event on the qty and price fields 
 

 
$('#sample').on('keyup', '[name^=qty], [name^=price]', function() { 
 
    // get related form 
 
    var form = $(this).closest('.form'); 
 
    // get its related values 
 
    var qty = parseInt(form.find('[name^=qty]').val(), 10), 
 
    price = parseInt(form.find('[name^=price]').val(), 10); 
 
    // ensure only numbers are given 
 
    if (!isNaN(qty) && !isNaN(price)) { 
 
    // set the total 
 
    form.find('[name^=total]').val(qty * price); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="sample"> 
 
    <!-- group all related blocks into a div .form --> 
 
    <!-- it makes it easier to reference in your JS --> 
 
    <div class="form"> 
 
    <div class="col-sm-3 nopadding"> 
 
     <div class="form-group"> 
 
     <select class="selectpicker" data-show-subtext="true" data-live-search="true" name="select_product[]"> 
 
     <option data-price=200 value=1>tes1</option> 
 
     <option data-price=218 value=2>tes2</option> 
 
     <option data-price=80 value=3>tes3</option> 
 
    </select> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-3 nopadding"> 
 
     <div class="form-group"> 
 
     <input type="text" class="form-control" name="qty[]" value="" placeholder="Quantity"> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-3 nopadding"> 
 
     <div class="form-group"> 
 
     <input type="text" class="form-control price" name="price[]" value="" placeholder="Price"> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-3 nopadding"> 
 
     <div class="form-group"> 
 
     <input type="text" class="form-control " name="total[]" value="" placeholder="total" readonly> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <button class="generate" type="button">Generate New Form</button> 
 

 
</div>

注意，我是懶惰的，而不是做[name="price[]"]，我壓根兒[name^=price]。

編輯更改爲keyup。