www.webdeveloper.com
Results 1 to 7 of 7

Thread: need help calculating a form subtotal from options maybe using jquery to do it?

  1. #1
    Join Date
    Sep 2006
    Location
    Wixom, MI
    Posts
    292

    Question need help calculating a form subtotal from options maybe using jquery to do it?

    Basically a client of mine has a form that has for now one option drop down with multiple options each with their own pricing and a quantity box, the drop downs do not have the price in the value however they have a long string of different info separated by : and the second bit of info is the price as in the example below.

    What I need and am trying to create is a script which on page load it would calculate the price based on the first option being selected and quantity field having a 1 in it, the default.

    Then anytime the quantity box is changed or the option drop down is changed it would recalculate.

    The total would be displayed as a sub total on the page.

    The price for each option would need to be split from the rest of the info which is in that option's value before being able to calculate it.

    Anyone able to advise how to do this?

    I tried a few things but not sure why it wasn't working.

    Form Code:
    Code:
    <form action="" method="post">
    <input name="userid" type="hidden" value="">
    <table id="itemoptions" style="padding-left:10px; padding-right:10px;">
    <tr><td><p>1. Select Your Options</p>
    <select name="productpr" style="width:370px;">
       <option value="Mattress Name, Option 1 Name:150:0:1:1234567890">Mattress Name, Option 1 Name - $150</option>
       <option value="Mattress Name, Option 2 Name:200:0:2:1234567890">Mattress Name, Option 2 Name - $200</option>
       <option value="Mattress Name, Option 3 Name:250:0:3:1234567890">Mattress Name, Option 3 Name - $250</option>
       <option value="Mattress Name, Option 4 Name:300:0:4:1234567890">Mattress Name, Option 4 Name - $300</option>
    </select></td></tr>
    <tr><td><input name="noqty" type="hidden" value="2">
    <p>2. Choose A Quantity</p><input name="qty" type="text" value="1" size="3"></td></tr>
    <tr><td><input name="noqty" type="hidden" value="2">
    <p style="float:left; font-size:16px;"><b>Sub-Total:</b></p> <p style="float:right; font-size:16px;" id="subtotal"><b>$150.00</b></p> </td></tr>
    <tr><td align="right"><hr color="#FFFFFF" size="1" /><input type="submit" value="Add To Cart" style="width:80px; height:30px; color:#FFFFFF; background-color:#79C144;"></td></tr>
    </table>
    <input name="units" type="hidden" value="0">
    <input name="return" type="hidden" value="">
    </form>
    I tried using something I found online but couldn't adapt it to work right as I do not know javascript or jquery well at all.

    Code:
    $('select[name=productpr]').change(calcsubtotal);
    $('input[name=qty]').change(calcsubtotal);
    
    function calcsubtotal() {
        if ( jQuery('input[name=qty]:visible select').length > 0) {
            var a = Number($('input[name=qty]').val());
            var b = $('select[name=productpr]:visible select').val();
    		var price = b.split(":");
    		
            var total = a * Number(price[1]);
            $('#subtotal').val(total);
        }
    }
    Not my code just trying to update something for someone.

    Thanks
    Last edited by BWWebDesigns; 08-08-2013 at 11:49 AM.
    OriginalFundRaisingWidget - Free "Non Commercial" PayPal FundRaising Widget, for Charities, Organizations and Individuals, Hosted Free. Check It Out

  2. #2
    Join Date
    Jun 2008
    Posts
    106
    Try this (non-jQuery).

    http://pastebin.com/0ggNyH3Y

    I didn't modify the html at all, but it could be simplified a little more if IDs were used on certain elements.

  3. #3
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,636
    try this

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>subtotal</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    
    function calcsubtotal(){
    var a = Number($('#qty').val()),
    b = $('#productpr').val().split(','),
    price = b[1].split(":");
    $('#subtotal').html('<b>$' + a * Number(price[1]) + '.00</b>');
    }
    
    $('#productpr,#qty').change(calcsubtotal);
    calcsubtotal();
    });
    </script>
    </head>
    <body>
    <form action="" method="post">
    <input name="userid" type="hidden" value="">
    <table id="itemoptions" style="padding-left:10px; padding-right:10px;">
    <tr><td><p>1. Select Your Options</p>
    <select name="productpr" id="productpr" style="width:370px;">
       <option value="Mattress Name, Option 1 Name:150:0:1:1234567890">Mattress Name, Option 1 Name - $150</option>
       <option value="Mattress Name, Option 2 Name:200:0:2:1234567890">Mattress Name, Option 2 Name - $200</option>
       <option value="Mattress Name, Option 3 Name:250:0:3:1234567890">Mattress Name, Option 3 Name - $250</option>
       <option value="Mattress Name, Option 4 Name:300:0:4:1234567890">Mattress Name, Option 4 Name - $300</option>
    </select></td></tr>
    <tr><td><input name="noqty" type="hidden" value="2">
    <p>2. Choose A Quantity</p><input name="qty" id="qty" type="text" value="1" size="3"></td></tr>
    <tr><td><input name="noqty" type="hidden" value="2">
    <p style="float:left; font-size:16px;"><b>Sub-Total:</b></p> <p style="float:right; font-size:16px;" id="subtotal"><b>$150.00</b></p> </td></tr>
    <tr><td align="right"><hr color="#FFFFFF" size="1" /><input type="submit" value="Add To Cart" style="width:80px; height:30px; color:#FFFFFF; background-color:#79C144;"></td></tr>
    </table>
    <input name="units" type="hidden" value="0">
    <input name="return" type="hidden" value="">
    </form>
    </body>
    </html>
    Last edited by Padonak; 08-08-2013 at 06:37 PM.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  4. #4
    Join Date
    Sep 2006
    Location
    Wixom, MI
    Posts
    292
    I tried your code above (Padonak) and seems to work just fine, thanks
    OriginalFundRaisingWidget - Free "Non Commercial" PayPal FundRaising Widget, for Charities, Organizations and Individuals, Hosted Free. Check It Out

  5. #5
    Join Date
    Jun 2008
    Posts
    106
    lol so you didn't try mine. great. glad I put that work in.

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,636
    tenfold, both our codes can be used only as a draft, because there was no any attention payed to the text-box entered value filtering, so we can easily get $NaN in case the entered value has letters or other "wrong" chars. And please do not think that your work was done in vain. Even if the topic starter said nothing about your code, many others could check it and use for solving their problems. Thank you very much for participation and please keep it on.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  7. #7
    Join Date
    Jun 2008
    Posts
    106
    That is true. That stuff just bugs me. I'm sorry. At least there is a jQuery and non-jQuery way to achieve the goal.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles