Cálculo de porcentaje simple de un campo de entrada con JQuery

Estoy creando un formulario de PayPal en el que el usuario ingresa la cantidad y luego lo transfiere a PayPal,
todo funciona bien, pero necesito agregar un complemento de cálculo para hacer lo siguiente,

Si un usuario ingresa en el campo 10 $ (Calcule 10 $ -2% = 8 $) y devuelva el resultado como texto dentro de un intervalo de 8 $

Al final del formulario tengo un "(p) párrafo" con una identificación de intervalo "site_commission_box" dentro.
Necesito mostrar el número calculado dentro de este intervalo.

¿Qué complemento de JQuery es bueno para usar en esto y cómo puedo usarlo?
¿Algún buen ejemplo o tutorial para saber cómo puedo hacerlo?

Muchas gracias,
Philip

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

preguntado el 09 de enero de 11 a las 11:01

¿Soy yo, o $ 10 - 2% no $ 9.80? -

@lonesomeday Es la verdad -

2 Respuestas

¿Hay alguna razón por la que usas jQuery() en lugar de $()?

Además, realmente debería almacenar en caché los elementos seleccionados para no tener que consultar el DOM varias veces para el mismo elemento.

Así es como lo haría yo:

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

Puedes ver un ejemplo de trabajo , allí también pueden ver los cambios que hice en el HTML.

Respondido el 09 de enero de 11 a las 15:01

Todavía no puedo votar aquí, pero muchas gracias, ¡tienes mucha razón! Para jQuery (), lo uso así para evitar conflictos en WordPress. ¡muchas gracias! - Philip

@Philip: ¡No hay problema! Ah, sí, eso explica por qué. ¡Buena suerte con las donaciones! - mekwall

Debe agregar un controlador de eventos para un evento de cambio. Cada vez que se cambia el valor de entrada, se vuelve a calcular el descuento. Ver un ejemplo en http://jsfiddle.net/3sXZw/

Respondido el 09 de enero de 11 a las 15:01

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.