html - jQuery Increment Buttons Update Input Value Seen But Not Updating for Price Change -
i added plus & minus button in front of , behind input quantity , works, problem when quantity gets updated, it's not updating price/total, unless click , out of input box. how quantity update without needing click input box? system has code update price when quantity changed it's not reading value being changed when use plus or minus button, after click in box.
$('input#w3934_txtqantity').before("<input type='button' value='-' class='qtyminus' field='w3934_txtqantity' />"); $('input#w3934_txtqantity').after("<input type='button' value='+' class='qtyplus' field='w3934_txtqantity' />"); $('.qtyplus').click(function(e){ e.preventdefault(); fieldname = $(this).attr('field'); var currentval = parseint($('#w3934_txtqantity').val()); if (!isnan(currentval)) { $('#w3934_txtqantity').val(currentval + 10); } else { $('#w3934_txtqantity').val(0); } }); $(".qtyminus").click(function(e) { e.preventdefault(); fieldname = $(this).attr('field'); var currentval = parseint($('#w3934_txtqantity').val()); if (!isnan(currentval) && currentval > 0) { $('#w3934_txtqantity').val(currentval - 10); } else { $('#w3934_txtqantity').val(0); } }); $('#w3934_txtqantity').trigger('change'); input { width: 40px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table cellspacing="0" border="0" style="width:100%;height:100%;padding-top:5px;"> <tr> <td valign="bottom"><span id="w3934_lblquantity" style="white-space:nowrap;">quantity</span></td><td valign="bottom"><span id="w3934_lblunitprice" style="white-space:nowrap;">unit price</span></td> <td><span id="w3934_lbladdlcharges" style="display:inline-block;width:110px;">setup</span></td> <td valign="bottom"><span id="w3934_lblship">shipping</span></td><td valign="bottom" style="text-align:right;"><span id="w3934_lblsubtotal" style="white-space:nowrap;">subtotal</span></td></tr> <tr> <td class="subtotalline"><input name="w3934$txtqantity" type="text" value="170" id="w3934_txtqantity" class="medtext formfield" style="text-align:right;" /></td> <td class="subtotalline"><input name="w3934$txtunitprice" type="text" value="$2.00" readonly="readonly" id="w3934_txtunitprice" class="medtext formfield displaytextbox" style="margin-top:5px;text-align:center;" /></td> <td class="subtotalline"><input name="w3934$txtaddlcharges" type="text" value="$55.00" readonly="readonly" id="w3934_txtaddlcharges" class="medtext formfield displaytextbox" style="margin-top:5px;text-align:center;" /></td> <td class="subtotalline"><input name="w3934$txtship" type="text" readonly="readonly" id="w3934_txtship" class="medtext formfield displaytextbox" style="margin-top:5px;text-align:center;" /></td> <td class="subtotalline" align="right"><input name="w3934$txtsubtotal" type="text" value="$395.00" readonly="readonly" id="w3934_txtsubtotal" class="medtext formfield displaytextbox" style="margin-top:5px;" /></td> </tr> </table>
you did not add code updating total, seeing trigger change event on page load, assume have change handler. solution call handler @ every +/- button click:
$('input#w3934_txtqantity').before("<input type='button' value='-' class='qtyminus' field='w3934_txtqantity' />"); $('input#w3934_txtqantity').after("<input type='button' value='+' class='qtyplus' field='w3934_txtqantity' />"); $('.qtyplus').click(function(e){ e.preventdefault(); fieldname = $(this).attr('field'); var currentval = parseint($('#w3934_txtqantity').val()); if (!isnan(currentval)) { $('#w3934_txtqantity').val(currentval + 10); } else { $('#w3934_txtqantity').val(0); } $('#w3934_txtqantity').trigger('change'); // <---- }); $(".qtyminus").click(function(e) { e.preventdefault(); fieldname = $(this).attr('field'); var currentval = parseint($('#w3934_txtqantity').val()); if (!isnan(currentval) && currentval > 0) { $('#w3934_txtqantity').val(currentval - 10); } else { $('#w3934_txtqantity').val(0); } $('#w3934_txtqantity').trigger('change'); // <---- }); // change handler suppose have: $('#w3934_txtqantity').change(function () { $('#w3934_txtsubtotal').val('$' + (($('#w3934_txtqantity').val().replace(/\$/, '') * $('#w3934_txtunitprice').val().replace(/\$/, '') + +$('#w3934_txtaddlcharges').val().replace(/\$/, '') + +$('#w3934_txtship').val().replace(/\$/, '') ) || 0).tofixed(2) ); }); $('#w3934_txtqantity').trigger('change'); input { width: 40px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table cellspacing="0" border="0" style="width:100%;height:100%;padding-top:5px;"> <table> <tr> <td valign="bottom"><span id="w3934_lblquantity" style="white-space:nowrap;">quantity</span></td><td valign="bottom"><span id="w3934_lblunitprice" style="white-space:nowrap;">unit price</span></td> <td><span id="w3934_lbladdlcharges" style="display:inline-block;width:110px;">setup</span></td> <td valign="bottom"><span id="w3934_lblship">shipping</span></td><td valign="bottom" style="text-align:right;"><span id="w3934_lblsubtotal" style="white-space:nowrap;">subtotal</span></td></tr> <tr> <td class="subtotalline"><input name="w3934$txtqantity" type="text" value="170" id="w3934_txtqantity" class="medtext formfield" style="text-align:right;" /></td> <td class="subtotalline"><input name="w3934$txtunitprice" type="text" value="$2.00" readonly="readonly" id="w3934_txtunitprice" class="medtext formfield displaytextbox" style="margin-top:5px;text-align:center;" /></td> <td class="subtotalline"><input name="w3934$txtaddlcharges" type="text" value="$55.00" readonly="readonly" id="w3934_txtaddlcharges" class="medtext formfield displaytextbox" style="margin-top:5px;text-align:center;" /></td> <td class="subtotalline"><input name="w3934$txtship" type="text" readonly="readonly" id="w3934_txtship" class="medtext formfield displaytextbox" style="margin-top:5px;text-align:center;" /></td> <td class="subtotalline" align="right"><input name="w3934$txtsubtotal" type="text" value="$395.00" readonly="readonly" id="w3934_txtsubtotal" class="medtext formfield displaytextbox" style="margin-top:5px;" /></td> </tr> </table>
Comments
Post a Comment