JQueryブートストラップモーダル自動計算テキストフィールドが更新されない

Question

私は、必要に応じてすでに2つの自動更新テキストフィールド関数を含むブートストラップ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

（作業）

01私は、なぜ第三インスタンスわからない 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> 

から基づいて、第三例えば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> 

から基づいて、第2の例えば

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

（作業）（動作しません）モーダルウインドウの中では、与えられたアイブで自動的に更新されません。ちょうど別の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); 
});