Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Hạn chế » Cập nhật form mà không cần refresh
URL: https://www.javascriptbank.com/update-order-form-wo-page-refresh.html
Hiệu ứng JavaScript này dùng để cập nhật tổng giá tiền trên một biểu mẫu thanh toán mà không cần phải refresh lại cả trang web.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Hạn chế » Cập nhật form mà không cần refresh
URL: https://www.javascriptbank.com/update-order-form-wo-page-refresh.html
<script type="text/javascript">/* This script and many more are available free online atThe JavaScript Source :: http://javascript.internet.comCreated by: Kevin Hartig :: http://www.grafikfx.net/ */// Calculate the total for items in the form which are selected.function calculateTotal(inputItem) { with (inputItem.form) { // Process each of the different input types in the form. if (inputItem.type == "radio") { // Process radio buttons. // Subtract the previously selected radio button value from the total. calculatedTotal.value = eval(calculatedTotal.value) - eval(previouslySelectedRadioButton.value); // Save the current radio selection value. previouslySelectedRadioButton.value = eval(inputItem.value); // Add the current radio button selection value to the total. calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value); } else { // Process check boxes. if (inputItem.checked == false) { // Item was uncheck. Subtract item value from total. calculatedTotal.value = eval(calculatedTotal.value) - eval(inputItem.value); } else { // Item was checked. Add the item value to the total. calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value); } } // Total value should never be less than 0. if (calculatedTotal.value < 0) { InitForm(); } // Return total value. return(formatCurrency(calculatedTotal.value)); }}// Format a value as currency.function formatCurrency(num) { num = num.toString().replace(/\$|\,/g,''); if(isNaN(num)) num = "0"; sign = (num == (num = Math.abs(num))); num = Math.floor(num*100+0.50000000001); cents = num%100; num = Math.floor(num/100).toString(); if(cents<10) cents = "0" + cents; for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++) num = num.substring(0,num.length-(4*i+3)) + ',' + num.substring(num.length-(4*i+3)); return (((sign)?'':'-') + '$' + num + '.' + cents);}// This function initialzes all the form elements to default values.function InitForm() { // Reset values on form. document.selectionForm.total.value='$0'; document.selectionForm.calculatedTotal.value=0; document.selectionForm.previouslySelectedRadioButton.value=0; // Set all checkboxes and radio buttons on form to unchecked. for (i=0; i < document.selectionForm.elements.length; i++) { if (document.selectionForm.elements[i].type == 'checkbox' | document.selectionForm.elements[i].type == 'radio') { document.selectionForm.elements[i].checked = false; } }}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><body onload="InitForm();" onreset="InitForm();"><table><tr><td> <form method="POST" name="selectionForm"> <b>Pizza Order</b><br> Small $10.00 <input type="checkbox" name="Steak" value="10.00" onclick="this.form.total.value=calculateTotal(this);"> Medium $12.00 <input type="checkbox" name="Chicken" value="12.00" onclick="this.form.total.value=calculateTotal(this);"> Large $15.00 <input type="checkbox" name="Sushi" value="15.00" onclick="this.form.total.value=calculateTotal(this);"> <br><br> <b>Extra Toppings (only one selection allowed):</b> <br> <input type="radio" name="Sauce" value="0.00" onclick="this.form.total.value=calculateTotal(this);"> None <br> <input name="Sauce" type="radio" value="1.00" onclick="this.form.total.value=calculateTotal(this);"> Extra Cheese $1.00 <br> <input type="radio" name="Sauce" value="2.00" onclick="this.form.total.value=calculateTotal(this);"> Vegetarian $2.00 <br> <input type="radio" name="Sauce" value="3.00" onclick="this.form.total.value=calculateTotal(this);"> Meat $3.00 <br> <br> <input type="hidden" name="calculatedTotal" value="0"> <input type="hidden" name="previouslySelectedRadioButton" value="0"> <strong>Your total is:</strong> <input type="text" name="total" readonly onfocus="this.blur();"> </form></td></tr></table></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->