使用JQuery简单计算输入字段的百分比 [英] Simple Percentage Calculation of an Input Field with JQuery

问题描述

我正在建立一个PayPal表单，用户输入金额，然后转移到贝宝，

一切正常，但我需要添加一个计算插件来执行以下操作，

如果用户输入字段10 $（计算10 $ -2％= 8 $）并将结果作为文本返回到一个范围8 $中，则

在表单末尾，我有一个（p）段，里面有一个跨度idsite_commission_box。

我需要在这个跨度内显示计算出的数字。

哪个JQuery插件适用于此项目，以及如何使用它？

任何一个很好的示例或教程，以了解我可以如何使用它？

非常感谢，

Philip

 < form id =form_paypalaction =https://www.paypal.com/cgi-bin/webscrmethod =post> 
< input type =hiddenname =businessvalue =[e-mail]/> 
< input type =hiddenname =cmdvalue =_ xclick/> 
< input type =hiddenname =returnvalue =http：//returnpage.url/> 
< input type =hiddenname =cancel_returnvalue =http：//cancelreturnpage.url/> 
< input type =hiddenname =rmvalue =2/> 
< input type =hiddenname =currency_codevalue =USD/> 
< input type =hiddenname =quantityvalue =1/> 
< input type =hiddenname =item_namevalue =Item Name/> 
< input type =hiddenname =item_numbervalue =Item ID/> 
 
< label>金额（美元）：< / label> 
< input type =textname =amountid =input_amountclass =text/> 
 
< input type =hiddenname =invoicevalue =发帖ID/> 
< input type =hiddenname =cbtvalue =付款& rarr;/> 
< input type =hiddenname =item_numbervalue =Item ID/> 
< input type =submitname =submitvalue =确认和付款& rarr; class =submit/> 
< br /> 
< span id =msg_moreamountclass =icon_warning redstyle =display：none;> PayPal只需支付$ 0.35佣金即可获得$ 1捐款。< / span> 
 < span id =msg_activitystyle =display：none;> < img src =loader.gifalign =middlealt =load/>& nbsp;转移到PayPal，请稍候...< / span> 
 
< p> -2％的价格将会是< b> $< span class =text_decorationid =site_commission_box>< / span> USD< / B个。< / p为H. 
< / form> 
  

解决方案

是否有原因使用 jQuery（）代替 $（）？

另外，你应该真的缓存你选择的元素，这样你就不必多次查询同一元素的DOM。

以下是我的做法：

  $（function（）{
 //输入的最小必需值
 //在这种情况下，PayPal需要$ 0.35 $ 1 
 //捐赠，因此我们要求至少$ 1.35 
 var minimum_value = 1.35; 
 
 //至少使用两次的缓存元素
 var $ amount = $（＃input_amount），
 $ msg = $（＃msg），
 $ commission = $（＃site_commission_box）; 
 
 //附加处理程序输入keydown事件
 $ amount.keyup（function（e）{
 if（e.which == 13）{
 return; 
} 
 var金额= parseFloat（$ amount.val（）），
佣金=金额* 0.02; 
 
 if（isNaN（commission）|| isNaN（amount））{
 $ msg.hide（）; 
 $ commission.hide（）; 
 return; 
} 
 
 if（amount <= minimum_value）{
 $ commission.hide（）; 
 $ msg 
 .text（PayPal每$+金额+捐款需要$ 0.35的佣金。）
 .fadeIn（）; 
} else {
 $ msg.hide（）; $（b）$ b $佣金
 .fadeIn（）
 .find（span）
 .text（（amount-commission）.toFixed（2））; 
} 
}）; 
 
 //将处理程序附加到表单提交事件
 $（'＃form_paypal'）。submit（function（）{
 //检查是否有输入的金额$ b （$ amount.val（）> null）{
 //是等于或高于minimum_value？
的金额if（$ amount.val（）< minimum_value）{
 //需要更多金额
 //显示更多金额错误
 $ msg 
 .addClass（icon_warning_red）
 .text（请输入金额并重试。）
 .fadeIn（）; 
返回false; //防止表单提交
} 
 else {
 //金额大于minimum_value 
 // show activity 
 $ msg 
 .removeClasss（icon_warning_red）
 .html（'< img src =loader.gifalign =middlealt =load /> & nbsp;转入PayPal，请等待...'）
 .fadeIn（）; 
返回true; //提交表单
} 
} 
 else {
 //根本没有输入金额
 //显示没有金额错误; 
 $ msg.addClass（icon_warning_red）。fadeIn（）; 
返回false; //防止表单提交
} 
}）; 
}）; 
  

你可以看到一个工作示例这里，您可以在HTML中看到我所做的更改。

I'm building a PayPal form that the user enters the amount and after that transfered to paypal,
everything is working fine but i need to add a calculation plugin to do the following,

If a user enters in the field 10$ (Calculate 10$-2%=8$) and return the result as text inside a span 8$

At the end of the form i have a "(p) paragraph" with a span id "site_commission_box" inside.
I need to show the calculated number inside this span.

Which JQuery plugin is good for use on this and how i can use it?
Any good example or tutorial to find out how i can do it?

Thanks a lot,
Philip

<form id="form_paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="business" value="[e-mail]"/>
    <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>

解决方案

Is there a reason you use jQuery() instead of $()?

Also, you should really cache your selected elements so you don't have to query the DOM multiple times for the same element.

Here's how I would do it:

$(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
        }
    });
});

You can see a working example here, there you can see the changes I did in the HTML as well.

这篇关于使用JQuery简单计算输入字段的百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！