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，用于通过+ button生成一个新行

<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。

多个两个输入和jQuery动态生成的输入

1 个答案: