[英]Multiple two inputs and the inputs generated dynamically by jQuery
I have this form and this is my layout: 我有这个表格,这是我的布局:
I want when the user enters the quantity the total input = qty*price. 我想在用户输入数量时输入总数=数量*价格。
My view 我的观点
<?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();?>
This is my first jQuery and that used to generate a new row by + button 这是我的第一个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>
and this 2nd jQuery used to get product price from from drop-menu attributes and add that into price input. 第二个jQuery用于从drop-menu属性中获取产品价格,并将其添加到价格输入中。
<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>
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>
Note, that I am lazy instead of doing [name="price[]"]
, I simply did [name^=price] . 请注意,我懒得而不是[name="price[]"]
,我只是做了[name ^ = price] 。
Edit changed onchange to keyup. 编辑已更改onchange更改为keyup。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.