![](/img/trans.png)
[英]Updating a span using jQuery, based on a simple live calculation from a input field
[英]Simple Percentage Calculation of an Input Field with JQuery
我正在建立一個PayPal表單,用戶輸入金額,然后將其轉移到Paypal,
一切正常,但是我需要添加一個計算插件來執行以下操作,
如果用戶在字段10 $中輸入(計算10 $ -2%= 8 $)並以跨度8 $內的文本形式返回結果
在表格末尾,我有一個“(p)段落”,其內部跨度為“ 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 →"/>
<input type="hidden" name="item_number" value="Item ID"/>
<input type="submit" name="submit" value="Confirm & Pay →" 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"/> 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>
您使用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"/> 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
}
});
});
您必須為更改事件添加事件處理程序。 每當輸入值更改時,都會重新計算折扣。 參見http://jsfiddle.net/3sXZw/上的示例
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.