Question

I have a table laid out like so:

<table border="0">
    <tr>
        <td>10: <input type="text" size="1" autocomplete="off" name="10"/>&nbsp;&nbsp;</td>
        <td>12: <input type="text" size="1" autocomplete="off" name="12"/>&nbsp;&nbsp;</td>
        <td>14: <input type="text" size="1" autocomplete="off" name="14"/>&nbsp;&nbsp;</td>
        <td>16: <input type="text" size="1" autocomplete="off" name="16"/>&nbsp;&nbsp;</td>
        <td>18: <input type="text" size="1" autocomplete="off" name="18"/>&nbsp;&nbsp;</td>
        <td>20: <input type="text" size="1" autocomplete="off" name="20"/>&nbsp;&nbsp;</td>
        <td>22: <input type="text" size="1" autocomplete="off" name="22"/>&nbsp;&nbsp;</td>
    </tr>
</table>

I need to multiply the value that is inputted in the input box by 65 and generate a subtotal in dollars in real time. I’ve looked around and I’m not too proficient in javascript or jquery so I was wondering if such a solution already existed, or if someone could point me in the right direction in creating one.

Answer 1

Add this to the bottom of your HTML: Subtotal: <span id="subtotal"></span>

Make sure jQuery is loaded, and then toss this JavaScript below the HTML:

<script type="text/javascript">
function compute_subtotal() {
    var total = 0;
    $("input[type=text]").each( function(i,e) {
        var value = $(e).val();
        if( parseInt(value) > 0 ) total += (65 * parseInt(value));
    });
    $("#subtotal").html( total );
}

jQuery(document).ready( function() {

    $("input[type=text]").change( function() { compute_subtotal(); } );
    $("input[type=text]").keyup( function() { compute_subtotal(); } );

});
</script>