JQueryを使用した入力フィールドの単純なパーセンテージ計算

Question

私がPayPalに転記したPayPalフォームを作成した後、
すべてが正常に機能していますが、計算プラグインを追加する必要があります、

ユーザがフィールドに10 $に入る（10 $ -2％= 8 $を計算し）、私は、「持っている形の終わりにテキストスパン内部8 $

として結果を返す場合（p）段落 "の内側にspan_id" site_commission_box "を挿入します。
このスパン内に計算された数値を表示する必要があります。

どのJQueryプラグインがこれに使用でき、どのように使用できますか？
私はそれをどのように行うことができるかを見つけるための良い例やチュートリアルですか？

どうもありがとう、
フィリップ

<form id="form_paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> 
    <input type="hidden" name="business" value="mail@url.url"/> 
    <input type="hidden" name="cmd" value="_xclick"/> 
    <input type="hidden" name="return" value="http://returnpage.url"/> 
    <input type="hidden" name="cancel_return" value="http://cancelreturnpage.url"/> 
    <input type="hidden" name="rm" value="2"/> 
    <input type="hidden" name="currency_code" value="USD"/> 
    <input type="hidden" name="quantity" value="1"/> 
    <input type="hidden" name="item_name" value="Item Name"/> 
    <input type="hidden" name="item_number" value="Item ID"/> 

    <label>Amount (US$) : </label> 
    <input type="text" name="amount" id="input_amount" class="text" /> 

    <input type="hidden" name="invoice" value="Post ID"/> 
    <input type="hidden" name="cbt" value="Make Payment &rarr;"/> 
    <input type="hidden" name="item_number" value="Item ID"/> 
    <input type="submit" name="submit" value="Confirm & Pay &rarr;" class="submit" /> 
    <br/> 
    <span id="msg_moreamount" class="icon_warning red" style="display:none;">PayPal takes $0.35 commission for a $1 donation.</span> 
    <span id="msg_noamount" class="icon_warning red" style="display:none;">Please enter an amount and try again.</span> 
    <span id="msg_activity" style="display:none;"> <img src="loader.gif" align="middle" alt="load"/>&nbsp;Transferring to PayPal, please wait...</span> 

    <p>-2% of the price it will be <b>$<span class="text_decoration" id="site_commission_box"></span> USD</b>.</p> 
</form> 

Answer 1

あなたがjQuery()代わりの$()を使用する理由はありますか？

また、選択した要素を実際にキャッシュして、同じ要素に対して複数回DOMをクエリする必要はありません。ここで

は、私はそれを行うだろう方法は次のとおりです。

$(function() { 
    // the minimum required value to be entered. 
    // in this case PayPal takes $0.35 from a $1 
    // donation, hence we ask for at least $1.35 
    var minimum_value = 1.35; 

    // cache elements that are used at least twice 
    var $amount = $("#input_amount"), 
     $msg = $("#msg"), 
     $commission = $("#site_commission_box"); 

    // attach handler to input keydown event 
    $amount.keyup(function(e){ 
     if (e.which == 13) { 
      return; 
     } 
     var amount = parseFloat($amount.val()), 
      commission = amount*0.02; 

     if (isNaN(commission) || isNaN(amount)) { 
      $msg.hide(); 
      $commission.hide(); 
      return; 
     } 

     if (amount <= minimum_value) { 
      $commission.hide(); 
      $msg 
       .text("PayPal takes $0.35 commission for a $"+amount+" donation.") 
       .fadeIn(); 
     } else { 
      $msg.hide(); 
      $commission 
       .fadeIn() 
       .find("span") 
        .text((amount-commission).toFixed(2)); 
     } 
    }); 

    // attach handler to the form submit event 
    $('#form_paypal').submit(function() { 
     // check if there is an amount entered 
     if ($amount.val() > null) { 
      // is the amount equal to or higher than the minimum_value? 
      if ($amount.val() < minimum_value) { 
       // need more amount 
       // show more amount error 
       $msg 
        .addClass("icon_warning_red") 
        .text("Please enter an amount and try again.") 
        .fadeIn(); 
       return false; // prevent the form from submitting 
      } 
      else { 
       // amount is more than minimum_value 
       // show activity 
       $msg 
        .removeClasss("icon_warning_red") 
        .html('<img src="loader.gif" align="middle" alt="load"/>&nbsp;Transferring to PayPal, please wait...') 
        .fadeIn(); 
       return true; // submit the form 
      } 
     } 
     else { 
      // no amount entered at all 
      // show no amount error; 
      $msg.addClass("icon_warning_red").fadeIn(); 
      return false; // prevent the form from submitting 
     } 
    }); 
}); 

あなたは、そこにあなたが私もHTMLで行った変更を見ることができます作業例hereを見ることができます。

Answer 2

変更イベントのイベントハンドラを追加する必要があります。入力値が変更されるたびに、割引が再計算されます。例を参照してくださいhttp://jsfiddle.net/3sXZw/