Question

我有一个bootstrap html页面，其中包含2个自动更新文本字段功能以满足其需求。除此之外，我在模态中添加了另一个字段来完成页面，并且需要在某个文本字段上填充另一个自动计算。

第一次和第二次自动更新实例的基本表单

<form role="form" id="myForm" action="cashier.php?submit=yes" method="post" data-toggle="validator">
            <div class="form-group">
              <div class="row">
                <div class="col-md-6 col-xs-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Item</label>
                    <select onchange="GenPrice(this)" id="items" name="items" class="form-control" required>
                      <option value="" selected disabled>Select Item</option>
                      <?php
    //some sql function for fetch
            echo '<option value="'.$row['sup_eaprice'].'|'.$row['sup_name'].'" required>'.$row['sup_name'].'</option>';
        }
    }
    ?>
                    </select>
                    <div class="help-block with-errors"></div>
                  </div>
                </div>
                <div class="col-md-6 col-xs-6">
                  <div class="form-group">
                  //FIRST INSTANCE AUTO UPDATING TEXT FIELD
                    <label for="exampleInputEmail1">Price (ea)</label>
                    <input type="text" class="form-control" id="eaprice" placeholder="No Item Selected" required disabled>
                    <div class="help-block with-errors"></div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 col-xs-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Quantity</label>
                    <input type="text" class="form-control calculate" onchange="GenTot(this)" name="quantity" id="quantity" placeholder="How many?" pattern="^[0-9]*[1-9][0-9]*$" maxlength="3" data-minlength="1" required>
                    <div class="help-block with-errors"></div>
                  </div>
                </div>
                <div class="col-md-6 col-xs-6">
                  <div class="form-group">
                  //2ND INSTANCE AUTO UPDATING TEXTFIELD
                    <label for="exampleInputEmail1">Total</label>
                    <input type="text" class="form-control" id="ztotal" name="ztotal" readonly>
                    <div class="help-block with-errors"></div>
                  </div>
                </div>
              </div>
              <div class="form-group" align="right">
                <button id="submit" type="submit" class="btn btn-primary" name="addcart">Add Cart</button>
              </div>
            </div>
          </form>

模态窗口第3个实例

          <!--create confirmation modal window-->
    <div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <b>Final Check</b>
                </div>
                <div class="modal-body">
      <div class="row">
          <form role="form" id="purchformx" action="cashier.php?submit=yes" method="post" data-toggle="validator">
              <!-- hidden for purpose of change auto calc -->
              <input type="hidden" name="thetotal" class="calchange" id="thetotal" value="<?php echo $overall; ?>">
                    <div class="col-md-6 col-xs-6">
                      <div class="form-group">
                        <label for="exampleInputEmail1">Received</label>

<input type="text" class="form-control calchange" name="received" id="received" placeholder="How much given?" pattern="^[0-9]*[1-9][0-9]*$" maxlength="4" data-minlength="1" required>
                        <div class="help-block with-errors"></div>
                      </div>
                    </div>
                    <div class="col-md-6 col-xs-6">
                      <div class="form-group">
                      //3RD INSTANCE AUTO UPDATE NOT WORKING
                        <label for="exampleInputEmail1">Change</label>
                        <input type="text" class="form-control" id="thechange" name="thechange" readonly>
                        <div class="help-block with-errors"></div>
                      </div>
                    </div>
            </form>
                  </div>
                </div>
      <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <a href="#" id="submit" class="btn btn-success success" data-dismiss="modal">Submit</a>
                </div>
            </div>
        </div>
    </div>
    <!--end modal-->

JQUERIES

首例（工作）

<script type="text/javascript">
    function GenPrice(data) {
    var xprice = data.value;
    var zprice = xprice.split("|");
document.getElementById ("eaprice").value = zprice[0];
document.myForm.eaprice.value = zprice[0];

}
</script>

基于Calculate total value inline form

的第二个（工作）实例

<script type="text/javascript">
/* total value calculator */
$(document).ready(function () {

    //Calculate both inputs value on the fly
    $('.calculate').keyup(function () {
        var Tot = parseFloat($('#eaprice').val()) * parseInt($('#quantity').val());
        if(isNaN(Tot)) Tot = "";
        $('#ztotal').val(Tot);
    });

    //Clear both inputs first time when user focus on each inputs and clear value 00
    $('.calculate').focus(function (event) {
        $(this).val("").unbind(event);
    });

});
</script>

基于auto calculate total value

的第三个实例（不工作）

<script type="text/javascript">
$(document).ready(function(){
    $('.calchange').change(function(){
        var total = 0;
        $('.calchange').each(function(){
            if($(this).val() != '')
            {
                total = parseFloat($(this).val()) - parseFloat($('#thetotal').val());
            }
        });
        $('#thechange').html(total);
    });
})(jQuery);
</script>

我不确定为什么在模态窗口内的第3个实例根本没有自动更新，因为我刚刚为它创建了一个单独的jquery类。提前感谢您提供进一步的建议。

Answer 1

$('.calchange').change(function(){
var total = 0;
$('.calchange').each(function(){
 if($(this).val() != '') {
 total += parseFloat($(this).val()); 
} 
});
 var totalFinal = total - parseFloat($('#thetotal').val());
 $('#thechange').val(totalFinal);
});

JQuery Bootstrap Modal自动计算文本字段不更新

1 个答案: