jQuery form addition not working with drop downs

Question

Okay so basically I've got a form where you enter items you want to purchase and at any point during that you can select a standard and show discount and those discounts apply to the items you've added in real time, now the discount both work fine with they were regular text fields, but switching them to drop downs to limit the values that can be entered has broken my code, curious if anyone can help me out... the two form elements have IDs of st_disc and sh_disc...

Here is HTML from the form, ignore all the extra php, that is though so if the form is incorrectly submitted it remembers the choice that was selected...

    <td colspan="2" style="border-width:0px; padding:10px; text-indent: 10px;"><p class="tdblackbigger">Standard Discount:</p></td>
    <td style="border-width:0px; padding:10px; text-indent: -105px;"><p class="tdblackbigger">
        <?php $restdisc = $_REQUEST['st_discount']; ?>
        <?php $attr7 = 'selected="selected"'; ?>
        <select name="st_discount" id="st_disc" class="invoiceselect">
            <option selected="selected" value="">------</option>
            <option value="20"<?php echo $restdisc == '20' ? $attr7 : ''; ?>>20</option>
            <option value="35"<?php echo $restdisc == '35' ? $attr7 : ''; ?>>35</option>
            <option value="40"<?php echo $restdisc == '40' ? $attr7 : ''; ?>>40</option>
            <option value="45"<?php echo $restdisc == '45' ? $attr7 : ''; ?>>45</option>
        </select>
    </td>
    <td colspan="2" style="border-width:0px; padding:10px;"><p class="tdblackbigger">Show Discount:</p></td>
    <td style="border-width:0px; padding:10px; text-indent: -135px;"><p class="tdblackbigger">
        <?php $reshdisc = $_REQUEST['sh_discount']; ?>
        <?php $attr8 = 'selected="selected"'; ?>
        <select name="sh_discount" id="sh_disc" class="invoiceselect">
            <option selected="selected" value="">------</option>
            <option value="5"<?php echo $reshdisc == '5' ? $attr8 : ''; ?>>5</option>
            <option value="10"<?php echo $reshdisc == '10' ? $attr8 : ''; ?>>10</option>
            <option value="15"<?php echo $reshdisc == '15' ? $attr8 : ''; ?>>15</option>
            <option value="20"<?php echo $reshdisc == '20' ? $attr8 : ''; ?>>20</option>
            <option value="25"<?php echo $reshdisc == '25' ? $attr8 : ''; ?>>25</option>
        </select>
    </td>

And here is the JS written that was working when they were text boxes, I'm better at PHP than JS so it's probably something simple..

$(document).ready(function() {   
    $("input").keyup(function() {
    var subtotal = 0;
    var stantot = 0;
    var showtot = 0;
        for (var i = 0; i <= 30; i++) {
        var unitp = parseFloat($("#unitp" + i).val()) || 0;
        var casep = parseFloat($("#casep" + i).val()) || 0;
        var units = parseFloat($("#units" + i).val()) || 0;
        var cases = parseFloat($("#cases" + i).val()) || 0;
        var st_disc = parseFloat($("#st_disc").val()) || 0;
        var sh_disc = parseFloat($("#sh_disc").val()) || 0;

        var unitr = (unitp * units);
        var caser = (casep * cases);
        var result = (unitr + caser);
        var st_disc_fix = (st_disc / 100);
        var sh_disc_fix = (sh_disc / 100);
        var st_disc_solo = (st_disc_fix * result);
        var sh_disc_solo = (sh_disc_fix * result);
        var st_disc_amt = (result - st_disc_solo);
        var sh_disc_amt = (st_disc_amt - sh_disc_solo);
        var disc_total = (st_disc_fix + sh_disc_fix);
        var disc_whole = (disc_total * result);

        var disc = (result - disc_whole);
        var st_disc_tot = (result - disc_whole);
        var sh_disc_tot = (result - disc_whole);

        $("#line" + i).val(result.toFixed(2));
        $("#disc" + i).val(disc.toFixed(2));
        subtotal += parseFloat(result);
        stantot += parseFloat(st_disc_amt);
        showtot += parseFloat(sh_disc_amt);
    }
    $("#totretail").val(subtotal.toFixed(2));
    $("#standiscount").val(stantot.toFixed(2));
    $("#showdiscount").val(showtot.toFixed(2));

    var totship = ($("#totship").val() * 1);

    var finaltotal = (showtot + totship);
    $("#total").val(finaltotal.toFixed(2));

    });
 });

Answer 1

Looks like you are missing the main point here..

var st_disc = parseFloat($("#st_disc").val());
var sh_disc = parseFloat($("#sh_disc").val());

$("#st_disc").val()   and  $("#sh_disc").val()  is messing your logic here

"#st_disc" is the id of the selected element and it does not have a value .. The options inside will have a selected value..

So var st_disc = parseFloat($("#st_disc").val()); should be

     var st_disc = parseFloat($("#st_disc  option:selected").val()) || 0;

var sh_disc = parseFloat($("#sh_disc option:selected").val()) || 0;


                            OR

var st_disc = parseFloat($("#st_disc").find(":selected").val()) || 0;

var sh_disc = parseFloat($("#sh_disc").find(":selected").val()) || 0;​