Grow your CSS skills. Land your dream job.

Dynamic Order Form [PLUS]

  • # October 17, 2009 at 10:48 pm

    Hi!, thanks for everything and all your work. ( great work )
    I write from Limache, Chile. (Language Spanish, so my English is not excellent)
    I like very much, the Dynamic Order Form, I already see the video #50 where you explain what it does.

    But now I have a project where I need multiply 2 fields, then the result multiply itself whit another field.
    all this field are INPUT type..
    so, In your example you have an INPUT and multiply whit a SPAN text

    I want to Multiple like this
    INPUT.n1 * INPUT.n2 = Subtotal.t1 * INPUT.n3 = Subtotal.t2
    INPUT.n1 * INPUT.n2 = Subtotal.t1 * INPUT.n3 = Subtotal.t2
    total.total

    I have this:
    HTML

    Code:
    UNO = | =

    — I realize that the ID must be different … in the different tr … or not??
    <td class="num-pallets"><input type="text" class="num-pallets-input" id="sparkle-num-pallets_1" name="monto" size="10"></input></td>

    .JS

    Code:
    $(function(){

    $(‘.num-pallets-input2′).blur(function(){

    var $uno = $(‘.num-pallets-input’);//****
    var $unoval = $uno.val();//****

    var $this = $(this);
    var numPallets = $this.val();

    if ( (IsNumeric(numPallets)) && (numPallets != ”) {

    var rowTotal = numPallets * $unoval;

    $this
    .css(“background-color”, “white”)
    .parent().parent()
    .find(“td.row-total input”)
    .val(rowTotal);

    } else {

    $this.css(“background-color”, “#ffdcdc”);

    };

    });

    });

    ///7 NUEVA FUNCION PARA SACAR EL MONTO TAX
    $(function(){

    $(‘.num-pallets-input3′).blur(function(){

    var $uno = $(‘.row-total-input’);//****
    var $unoval = $uno.val();//****

    var $this = $(this);
    var numPallets = $this.val();

    if ( (IsNumeric(numPallets)) && (numPallets != ”) ) {

    var rowTotal = numPallets * $unoval;

    $this
    .css(“background-color”, “white”)
    .parent().parent()
    .find(“td.row-total2 input”)
    .val(rowTotal);

    } else {

    $this.css(“background-color”, “#ffdcdc”);

    };

    calcProdSubTotal();
    calcTotalPallets();
    calcShippingTotal();
    calcOrderTotal();

    });

    });

    Yes, I suck in .js, I took the example .js and I copy/paste, take some variable… like this:

    var $uno = $(‘.row-total-input’);//**** take the .row-total-input from the form which I calculated whit the first function
    var $unoval = $uno.val();//**** take the val of the .row-total-input …

    but and dont know much of .js
    :(

    but it work, ah…
    but don’t work well ..
    calculate all the values for the first value .. mmmmmmmm. like this

    100 * 2 = 200 *10 = 2000
    324 * 3 = 300 * 20 = 4000

    or
    A * B = (A*B) * D = (A*B*D)
    A1 * B1 = (A*B1) * D1 = (A*B1*D1)
    you see…

    well… please if you can give and eyes or 2,, and post the thinking … THANKS

    # October 18, 2009 at 2:16 am
    Code:
    $(function(){

    $(‘.num-pallets-input’).blur(function(){

    var $this = $(this);

    var numPallets = $this.val();
    var multiplier = $this
    .parent().parent()
    .find(“td.num-pallets2 input”)
    .val();

    if ( (IsNumeric(numPallets)) && (numPallets != ”) ) {

    var rowTotal = numPallets * multiplier;

    $this
    .css(“background-color”, “white”)
    .parent().parent()
    .find(“td.row-total input”)
    .val(rowTotal);

    //rowTotal < - esto e muestra en row-total input

    $('.num-pallets-input3').blur(function(){

    var $this = $(this);

    var tax = $this.val();

    if ( (IsNumeric(numPallets)) && (numPallets != '') ) {

    var rowTotal2 = tax * rowTotal;

    $this
    .css("background-color", "white")
    .parent().parent()
    .find("td.row-total2 input")
    .val(rowTotal2);

    };
    });

    } else {

    $this.css("background-color", "#ffdcdc");

    };

    calcProdSubTotal();
    calcTotalPallets();
    calcShippingTotal();
    calcOrderTotal();

    });

    });

    por si alguien lo quiere….

    maybe someone else need this….
    thank For The INSPIRATION …

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".