Htmlフォーム/ jQuery：タブで入力を変更すると数値が小さくなります

Question

HtmlとjQueryで作成されたフォーム上で奇妙なことが起こっています。基本的に私は最初の入力に挿入された量からパーセンテージ（私のプラットフォーム料金）を減じ、再計算された値を2番目の入力に置き換えるばかげた関数を作成しました。もちろんそれは逆に起こります。

それはのようなものです：

• 入力1：あなたが提供するどのような
• 入力2：あなたが受け取る何を（私のプラットフォーム料の損なわ）

することができますように画像を見てください（多かれ少なかれ）、最初の入力に挿入すると、2番目の入力はfil私のパーセントが7％ならと導かれました。かなりストレートです。

最初の入力から2番目のタブにタブを押したときに問題が発生します。 2番目の値はその値にとどまりますが、最初のは、識別できないまたは定義できない未定義の数値のがさらに減ります。私はなぜ、私はおそらく非常に愚かな何かが不足しているがわからないが、私はそれを見ることができません。あなたは、私は成功せずkeycode == 9にpreventDefaultとstopPropagationに試した見ることができるように

<div class="row top-15 form-group"> 
    <div class="col-sm-6"> 
     <h4> 
      <?php _e('Your bid','dev'); ?> 
     </h4> 
     <p> 
      <?php _e("Insert project's budget",'dev'); echo $budget;?> 
     </p> 
     <div class="input-group"> 
      <span class="input-group-addon" id="basic-addon3"><?php echo $currency ?></span> 
      <input type="number" name="mybid" id="bid" class="form-control" value="<?php echo $bid; ?>" placeholder="<?php _e(" How much you offer ", "dev ") ?>" data-alert="<?php _e('Please type in a bid value.','dev'); ?>" /> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <h4> 
      <?php _e("You will receive",'dev'); ?> 
     </h4> 
     <p> 
      <?php printf(__("%s of fees", 'dev'), '-' . $Dev_fee_after_paid . '%') ?> 
      <span id="fees" data-fees="<?php echo $Dev_fee_after_paid ?>"></span> 
     </p> 
     <div class="input-group"> 
      <span class="input-group-addon" id="basic-addon3"><?php echo $currency ?></span> 
      <input type="number" name="total" id="total" class="form-control" value="" size="10" placeholder="<?php _e(" What you get ", "Dev ") ?>" /> 
     </div> 
    </div> 
</div> 

私のjQueryの

var currency = $('#make-application').attr('data-currency'); 
var setFees = $('#fees').attr('data-fees'); 
var bid = $('#bid').val(); 
var fees = (bid/100)*setFees; 
// $("#total").val(total.toFixed(2)); 
$("#fees").text(' = ' + fees.toFixed(0) + currency); 
$('#bid, #total').on('focusout', function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
}); 
$("#bid").on('keyup', function(e){ 
    var newbid = $(this).val(); 
    var newfees = (newbid/100)*setFees; 
    var total = newbid-newfees; 
    if($(this).hasClass('error')){ 
     $(this).removeClass('error'); 
    } 
    if($.isNumeric(newbid) === false){ 
     $(this).addClass('error'); 
     return; 
    } 
    if(newbid > 0){ 
     $("#total").val(total.toFixed(0)); 
     $("#fees").text(' = ' + newfees.toFixed(0) + currency); 
    } else { 
     $("#total").val(''); 
    } 
    if(e.keyCode == 9) { //fixing the typed value in case of tab press 
     e.preventDefault(); 
     e.stopPropagation(); 
     $(this).val(newbid); 
    } 
}); 
$("#total").on('keyup', function(e){ 
    var totalTwo = $("#total").val(); 
    var feesTwo = (totalTwo/100)*setFees; 
    var bidTwo = (+feesTwo)+(+totalTwo); 
    if($(this).hasClass('error')){ 
     $(this).removeClass('error'); 
    } 
    if($.isNumeric(bidTwo) === false){ 
     $(this).addClass('error'); 
     return; 
    } 
    if(totalTwo > 0){ 
     $("#bid").val(bidTwo.toFixed(0)); 
     $("#fees").text(' = ' + feesTwo.toFixed(0) + currency); 
    } else { 
     $("#bid").val(''); 
    } 
    if(e.keyCode == 9) { //fixing the typed value in case of tab press 
     e.preventDefault(); 
     e.stopPropagation(); 
     $(this).val(totalTwo); 
    } 
}); 

：ここ

は私のHTMLです。あなたは私にいくつかの方向を教えていただけますか？

Answer 1

あなたの数学は間違っています。あなたの数学が正しければ、ある箱を他の箱から更新してすぐに反対にしても問題はありません。

rightbox = leftbox * (1 - setfees/100) 

ので

leftbox = rightbox/(1 - setfees/100) 

Answer 2

あなたが最初のボックスに入力を入れたとき、あなたは2番目のボックス更新：タブを押したときに

var newbid = $(this).val(); 
var newfees = (newbid/100)*setFees; 
var total = newbid-newfees; 

newbid:     1000 
newfees: (1000/100)*7 = 70 
total: 1000-70  = 930 

その後、keyUpイベントは、2番目のボックスの上に発射され、今度は最初のボックスを更新：

var totalTwo = $("#total").val(); 
var feesTwo = (totalTwo/100)*setFees; 
var bidTwo = (+feesTwo)+(+totalTwo); 

totalTwo:    930 
feesTwo: (930/100)*7 = 65 
bidTwo: 65+930  = 995 

イベントの発生方法とロジックの値の計算方法を変更する必要があります。

Answer 3

機能の最後にタブが押されているかどうかを確認しています。それを上に置いてみてください。

var currency = $('#make-application').attr('data-currency'); 
var setFees = $('#fees').attr('data-fees'); 
var bid = $('#bid').val(); 
var fees = (bid/100)*setFees; 
// $("#total").val(total.toFixed(2)); 
$("#fees").text(' = ' + fees.toFixed(0) + currency); 
$('#bid, #total').on('focusout', function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
}); 
$("#bid").on('keyup', function(e){ 
     if(e.keyCode == 9) { //fixing the typed value in case of tab press 
     e.preventDefault(); 
     e.stopPropagation(); 
     $(this).val(newbid); 
    } 
    var newbid = $(this).val(); 
    var newfees = (newbid/100)*setFees; 
    var total = newbid-newfees; 
    if($(this).hasClass('error')){ 
     $(this).removeClass('error'); 
    } 
    if($.isNumeric(newbid) === false){ 
     $(this).addClass('error'); 
     return; 
    } 
    if(newbid > 0){ 
     $("#total").val(total.toFixed(0)); 
     $("#fees").text(' = ' + newfees.toFixed(0) + currency); 
    } else { 
     $("#total").val(''); 
    } 
}); 
$("#total").on('keyup', function(e){ 
    var totalTwo = $("#total").val(); 
    var feesTwo = (totalTwo/100)*setFees; 
    var bidTwo = (+feesTwo)+(+totalTwo); 
    if(e.keyCode == 9) { //fixing the typed value in case of tab press 
     e.preventDefault(); 
     e.stopPropagation(); 
     $(this).val(totalTwo); 
    } 
    if($(this).hasClass('error')){ 
     $(this).removeClass('error'); 
    } 
    if($.isNumeric(bidTwo) === false){ 
     $(this).addClass('error'); 
     return; 
    } 
    if(totalTwo > 0){ 
     $("#bid").val(bidTwo.toFixed(0)); 
     $("#fees").text(' = ' + feesTwo.toFixed(0) + currency); 
    } else { 
     $("#bid").val(''); 
    } 

});