PDA

View Full Version : Calculating dropdown list value



eesyboi
02-11-2012, 11:35 AM
Hello,

I would really appreciate if someone can help me with this. I would like to make this Javascript calculate dropdown list value... Already it calculates radio button and checkboxes just fine, and i have tried different ways to include the drop-down list also, but since am still learning javascript it hasn't been able to work..

Here is the javascript code;


// 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);
pence = num%100;
num = Math.floor(num/100).toString();
if(pence<10)
pence = "0" + pence;
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 + '.' + pence);
}

// This function initialzes all the form elements to default values.
function InitForm() {
// Reset values on form.
document.deliveryorderform.total.value='£0.00';
document.deliveryorderform.calculatedTotal.value=0;
document.deliveryorderform.previouslySelectedRadioButton.value=0;

// Set all checkboxes and radio buttons on form to unchecked.
for (i=0; i < document.deliveryorderform.elements.length; i++) {
if (document.deliveryorderform.elements[i].type == 'checkbox' | document.deliveryorderform.elements[i].type == 'radio') {
document.deliveryorderform.elements[i].checked = false;
}
}
}

jscheuer1
02-11-2012, 02:58 PM
So we're still talking about:

http://www.javascriptsource.com/forms/update-order-form-no-page-refresh.html

Right? I thought so. :)

And it occurs to me that it might be helpful to first show how one gets the value of a select drop down in the most basic terms:


<select name="quantity" onchange="alert(this.value);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

Anyways, the answer is yes we can add one or more selects, but it depends upon what each select that is added is intended to represent that will determine how it should be dealt with in the script.

You should also be aware that even with the unaltered script, even though it might appear deceptively simple, the action taken for each type of input should be tailored not only to the type of input that it is, but also with regards to what it represents. And in that regard, the unaltered script gets it wrong.

The toppings should probably be checkboxes, but they wanted to demonstrate how radio button differs from checkbox so I guess we can forgive that. But the sizes being checkboxes means that more than one pizza can be ordered - say a small and a medium. If that happens, the price for the topping should be multiplied by the number of pizzas. But it's not.

Without bothering to correct that oversight, here's a modified version of the script that adds a select drop down for quantity:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- Paste this code into an external JavaScript file (remove the opening and closing <script> tags) -->

<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Kevin Hartig :: http://www.grafikfx.net/ */

// Calculate the total for items in the form which are selected.
function calculateTotal(inputItem) {
with (inputItem.form) {
calculatedTotal.value /= previouslySelectedQuantity.value;
previouslySelectedQuantity.value = quantity.value;
// 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 -= previouslySelectedRadioButton.value;
// Save the current radio selection value.
previouslySelectedRadioButton.value = inputItem.value;
// Add the current radio button selection value to the total.
calculatedTotal.value = +calculatedTotal.value + +inputItem.value;
} else if (inputItem.type === "checkbox"){ // Process check boxes.
if (inputItem.checked === false) { // Item was uncheck. Subtract item value from total.
calculatedTotal.value -= inputItem.value;
} else { // Item was checked. Add the item value to the total.
calculatedTotal.value = +calculatedTotal.value + +inputItem.value;
}
}
calculatedTotal.value *= quantity.value;

// Total value should never be less than 0.
if (calculatedTotal.value < 0) {
InitForm();
}

// Set total field(s) to total value.
var tot = formatCurrency(calculatedTotal.value);
for (var i = total.length - 1; i > -1; --i){
total[i].value = tot;
}
}
}

// Format a value as currency.
function formatCurrency(num) {
num = num.toString(10).replace(/[$,]/g,'');
if(isNaN(num)){num = 0;}
return ((num == (num = Math.abs(num))?'':'-') + '$' + num.toFixed(2));
}

// This function initialzes all the form elements to default values.
function InitForm() {
// Reset values on form.
var form = document.forms.selectionForm, tots = form.total, els = form.elements;
for (var i = tots.length - 1; i > -1; --i){
tots[i].value = '$0.00';
}
form.calculatedTotal.value = form.previouslySelectedRadioButton.value = 0;
form.previouslySelectedQuantity = 1;

// Set all checkboxes and radio buttons on form to unchecked.
for (i = els.length - 1; i > -1; --i){
if (els[i].checked) {
els[i].checked = false;
} else if (els[i].tagName.toLowerCase() === 'select'){
els[i].options.selectedIndex = 0;
}
}
}
</script>

<!-- Paste this code into the HEAD section of your HTML document
Change the file name and path to match the one you created

<script type="text/javascript" src="yourFileName.js"></script> -->

</head>
<body>

<!-- Paste this code into the BODY section of your HTML document -->

<div style="width: 430px; margin: auto;">
<table><tr><td>
<form method="POST" name="selectionForm">
<b>Pizza Order</b><br>
<fieldset>
<b>Choose Size(s):</b><br>
<label>Small&nbsp;$10.00
<input type="checkbox" name="Steak" value="10.00" ></label>&nbsp;&nbsp;
<label>Medium&nbsp;$12.00
<input type="checkbox" name="Chicken" value="12.00"></label>&nbsp;&nbsp;
<label>Large&nbsp;$15.00
<input type="checkbox" name="Sushi" value="15.00" ></label>
<br><br>
<strong>Your total is:</strong>
<input type="text" name="total" readonly>
</fieldset>

<br><br>
<fieldset>
<b>Extra Toppings (only one selection allowed):</b> <br>
&nbsp;&nbsp;<label><input type="radio" name="Sauce" value="0.00"> None</label>
<br>
&nbsp;&nbsp;<label><input name="Sauce" type="radio" value="1.00"> Extra Cheese&nbsp;$1.00</label>
<br>
&nbsp;&nbsp;<label><input type="radio" name="Sauce" value="2.00"> Vegetarian&nbsp;$2.00</label>
<br>
&nbsp;&nbsp;<label><input type="radio" name="Sauce" value="3.00"> Meat&nbsp;$3.00</label>
<br><br>
<strong>Your total is:</strong>
<input type="text" name="total" readonly>
</fieldset>

<br>
<br>
<fieldset>
<b>Quantity:</b>
<select name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</fieldset>

<br>
<br>
<input type="hidden" name="calculatedTotal" value="0">
<input type="hidden" name="previouslySelectedRadioButton" value="0">
<input type="hidden" name="previouslySelectedQuantity" value="1">
<strong>Your total is:</strong>
<input type="text" name="total" readonly>
<input type="reset">
</form>
</td></tr></table>
</div>
<p><div style="text-align: center;">
<span style="font: normal 10px arial, helvetica, sans-serif;">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></span>
</div><p>
<script type="text/javascript">
InitForm();
(function(){
var form, puts = (form = document.forms.selectionForm).elements;
form.onreset = function(){InitForm(); return false;};
for (var i = puts.length - 1; i > -1; --i){
if(/radio|checkbox/.test(puts[i].type)){
puts[i].onclick = function(){calculateTotal(this);};
} else if (puts[i].name === 'quantity') {
puts[i].onchange = function(){calculateTotal(this);};
} else if (puts[i].name === 'total') {
puts[i].onfocus = function(){this.blur();};
}
}
})();
</script>
</body>
</html>

Notes: Modified also for efficiency and adherence to HTML 5 standards. Part of the efficiency upgrade includes another script added at the end to assign the events rather than having so many of them and all inline in the HTML portion. Also added a reset button.

eesyboi
02-12-2012, 04:04 PM
I really do appreciate your help once again. I have started the implementation of the modified script and I really like the idea of the script added at the end to assign the events. But i noticed i have to specify the select drop down names, so i was wondering if i could add as much as i have, i have about lets say 20 drop down for 20 different meals. The drop down would be to select the quantity with an already specified value..


<script type="text/javascript">
InitForm();
(function(){
var form, puts = (form = document.forms.selectionForm).elements;
form.onreset = function(){InitForm(); return false;};
for (var i = puts.length - 1; i > -1; --i){
if(/radio|checkbox/.test(puts[i].type)){
puts[i].onclick = function(){calculateTotal(this);};
} else if (puts[i].name === 'quantity') {
puts[i].onchange = function(){calculateTotal(this);};
} else if (puts[i].name === 'total') {
puts[i].onfocus = function(){this.blur();};
}
}
})();
</script>

I also noticed the script added at the end selects all radio and checkbox in the form, the issue with this is i have other checkboxes and radio button in the script. I will let you take a view at what am actually talking about… This is for a school project and am actually impressed with what i have done so far as a beginner :), however its not completed yet, am still looking for a order verification script. The peg is http://tastyewd.co.uk/orderfordelivery.html

Optional: It will also help if i can disable the display of the Sub total on the first and last page.

Thanks alot for your time..

jscheuer1
02-12-2012, 04:59 PM
Like I was saying, the javascript needs to be tailored to what each form element is and what it represents. From what you're saying, you may need to pass more information to calculateTotal or get more information from each form element that invokes it. A class could be given to the checkboxes that you want to fire calculateTotal, for instance - say 'clac'. And you could grab all select elements. For those, the function that assigns events would be:


(function(){
var form, puts = (form = document.forms.selectionForm).elements;
form.onreset = function(){InitForm(); return false;};
for (var i = puts.length - 1; i > -1; --i) {
if (puts[i].type === 'radio') {
puts[i].onclick = function(){calculateTotal(this);};
} else if (puts[i].type === 'checkbox' && puts[i].className === 'calc') { // only grabs checkboxes with the class 'calc'
puts[i].onclick = function(){calculateTotal(this);};
} else if (puts[i].tagName.toLowerCase() === 'select') { // grabs all select elements
puts[i].onchange = function(){calculateTotal(this);};
} else if (puts[i].name === 'total') {
puts[i].onfocus = function(){this.blur();};
}
}
})();

But once you get up into the calculateTotal() function, perhaps you need to treat some or each of the elements differently to get the result you're after.

Another thing to consider is that with the original script and all versions I've put forward so far, each time calculateTotal() is run, it works off of the previous total, adding to and/or subtracting from it to get the new total.

But you could use a different approach, starting each run of calculateTotal() with the total set to 0, check each element that can impact the total and add it up from scratch each time. As more and more elements get added and the actions to take for each one become more diverse, this is perhaps easier to work with, for example (this one also fixes the problem with multiple sized pizzas I mentioned before):


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- Paste this code into an external JavaScript file (remove the opening and closing <script> tags) -->

<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Kevin Hartig :: http://www.grafikfx.net/ */

// Calculate the total for items in the form which are selected.
function calculateTotal(inputItem) {
var calculatedTotal = multiplier = i = 0, form = inputItem.form, els = form.elements, tot;
for(i; i < els.length; ++i){
if (els[i].type === "checkbox" && els[i].checked) {
calculatedTotal += +els[i].value;
++multiplier;
} else if (els[i].type === "radio" && els[i].checked) {
calculatedTotal += els[i].value * (multiplier || 1);
}
}
calculatedTotal *= form.quantity.value;

// Total value should never be less than 0.
if (calculatedTotal < 0) {
InitForm();
return;
}

// Set total field(s) to total value.
tot = formatCurrency(calculatedTotal);
for (i = form.total.length - 1; i > -1; --i){
form.total[i].value = tot;
}
}

// Format a value as currency.
function formatCurrency(num) {
num = num.toString(10).replace(/[$,]/g,'');
if(isNaN(num)){num = 0;}
return ((num == (num = Math.abs(num))?'':'-') + '$' + num.toFixed(2));
}

// This function initialzes all the form elements to default values.
function InitForm(form) {
// Reset values on form.
var tots = form.total, els = form.elements;
for (var i = tots.length - 1; i > -1; --i){
tots[i].value = '$0.00';
}

// Set all checkboxes and radio buttons on form to unchecked.
for (i = els.length - 1; i > -1; --i){
if (els[i].checked) {
els[i].checked = false;
} else if (els[i].tagName.toLowerCase() === 'select'){
els[i].options.selectedIndex = 0;
}
}
}
</script>

<!-- Paste this code into the HEAD section of your HTML document
Change the file name and path to match the one you created

<script type="text/javascript" src="yourFileName.js"></script> -->
<style type="text/css">
form {
font: normal 90% verdana, helvetica, arial, sans-serif;
}
fieldset, legend {
border: 2px solid #aaa;
border-radius: 7px;
}
legend {
padding: 3px 5px;
font-weight: bold;
font-size: 90%;
}
form b {
font-size: 110%;
}
</style>
</head>
<body>

<!-- Paste this code into the BODY section of your HTML document -->

<div style="width: 430px; margin: auto;">
<form method="post" name="selectionForm">
<b>Pizza Order</b><br><br>
<fieldset><legend>Choose Size(s)</legend>
<label>Small&nbsp;$10.00
<input type="checkbox" name="small" value="10.00" ></label>&nbsp;&nbsp;
<label>Medium&nbsp;$12.00
<input type="checkbox" name="medium" value="12.00"></label>&nbsp;&nbsp;
<label>Large&nbsp;$15.00
<input type="checkbox" name="large" value="15.00" ></label>
<br><br>
<strong>Your total is:</strong>
<input type="text" name="total" readonly>
</fieldset>

<br><br>
<fieldset><legend>Extra Toppings (only one selection allowed)</legend>
&nbsp;&nbsp;<label><input type="radio" name="Sauce" value="0.00"> None</label>
<br>
&nbsp;&nbsp;<label><input name="Sauce" type="radio" value="1.00"> Extra Cheese&nbsp;$1.00</label>
<br>
&nbsp;&nbsp;<label><input type="radio" name="Sauce" value="2.00"> Vegetarian&nbsp;$2.00</label>
<br>
&nbsp;&nbsp;<label><input type="radio" name="Sauce" value="3.00"> Meat&nbsp;$3.00</label>
<br><br>
<strong>Your total is:</strong>
<input type="text" name="total" readonly>
</fieldset>

<br><br>
<fieldset><legend>Quantity</legend>
<select name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</fieldset>

<br><br>
<strong>Your total is:</strong>
<input type="text" name="total" readonly>
<input type="reset">
</form>
</div>
<p><div style="text-align: center;">
<span style="font: normal 10px arial, helvetica, sans-serif;">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></span>
</div><p>
<script type="text/javascript">
(function(){
var form = document.forms.selectionForm, puts = form.elements;
InitForm(form);
form.onreset = function(){InitForm(this); return false;};
for (var i = puts.length - 1; i > -1; --i){
if(/radio|checkbox/.test(puts[i].type)){
puts[i].onclick = function(){calculateTotal(this);};
} else if (puts[i].name === 'quantity') {
puts[i].onchange = function(){calculateTotal(this);};
} else if (puts[i].name === 'total') {
puts[i].onfocus = function(){this.blur();};
}
}
})();
</script>
</body>
</html>

When I have more time, I'll look at your code and see what I can make of it. From what you're saying there may need to be separate totals for certain areas of the form and then perhaps a grand total at the end. That can be done, but the code gets more complicated.

The bottom line is there's no one size fits all for this sort of thing, we have to make it do what you want/need it to do.

eesyboi
02-12-2012, 08:02 PM
Thanks once again for the prompt reply. I just implemented the code, saved the javascript in an external file, and added the total input field then the addtional script. I have tried the same process for the first modified script and the recent one, but it doesn't work, i changed the form name also from selectionForm to my form name to deliveryorderform. The "Your total is:" and the box field appears but it doesn't display the amount. I don't know what am doing wrong, but i have updated the changes i made to the website, maybe you could take a look at it. You can also view the javascript file.

I think you misunderstood me with the quantity part. The quantity already has a value which represent the price of the the quantity selected.

eesyboi
02-12-2012, 08:46 PM
UPDATE: I have decided to change all the items into drop-down, as all the items need to have a quantity with them, except the meal size which is still a radio button. So basically to make it easy to understand the script will have to be able to calculate the values of all drop-drown and radio input type and then display the total on each <fieldset>, the original script could calculate only radio and checkboxes excluding the drop-down mean.

In the original script I noticed whenever i copy and paste the total input box and pasted it in different <fieldset> it doesn't show the total, but when the total input box is only visible once on the page, it works.

jscheuer1
02-13-2012, 09:47 AM
If you have multiple total inputs, you need a different syntax for changing their value:


for (i = form.total.length - 1; i > -1; --i){
form.total[i].value = tot;
}

But if there is only one, that won't work, so you do just:


form.total.value = tot;

You seem to have it worked out for only one total, so let's go with that. I will however leave the other method in place (two places) in a commented out state. The entire script can go after the form:


<script type="text/javascript">
// Calculate the total for items in the form which are selected.
function calculateTotal(inputItem) {
var calculatedTotal = 0, i, form = inputItem.form, tot,
formObj = InitForm[form.getAttribute('name')], radios = formObj.radios, selects = formObj.selects;
for (i = radios.length - 1; i > -1; --i){
if(radios[i].checked){
calculatedTotal += +radios[i].value;
}
}
for (i = selects.length - 1; i > -1; --i){
calculatedTotal += +selects[i].value;
}

// Set total field(s) to total value.
tot = formatCurrency(calculatedTotal);
form.total.value = tot;
/* for (i = form.total.length - 1; i > -1; --i){
form.total[i].value = tot;
} */
}

// Format a value as currency.
function formatCurrency(num) {
num = num.toString(10).replace(/[$,]/g,'');
if(isNaN(num)){num = 0;}
return ((num == (num = Math.abs(num))?'':'-') + '$' + num.toFixed(2));
}

// This function initialzes all the form elements to default values.
function InitForm(form) {
// Reset values on form.
var tots = form.total, els = form.elements;
/* for (var i = tots.length - 1; i > -1; --i){
tots[i].value = '$0.00';
} */
tots.value = '$0.00';

// Set all checkboxes and radio buttons on form to unchecked.
for (i = els.length - 1; i > -1; --i){
if (els[i].checked) {
els[i].checked = false;
} else if (els[i].tagName.toLowerCase() === 'select'){
els[i].options.selectedIndex = 0;
}
}
}

(function(){
var form = document.forms.deliveryorderform, puts = form.elements;
InitForm(form);
InitForm.deliveryorderform = {selects: [], radios: []};
form.onreset = function(){InitForm(this); return false;};
for (var i = puts.length - 1; i > -1; --i) {
if (puts[i].type === 'radio') {
puts[i].onclick = function(){calculateTotal(this);};
InitForm.deliveryorderform.radios.push(puts[i]);
} else if (puts[i].tagName.toLowerCase() === 'select' && puts[i].options[0].value === '0.00') { // grabs all select elements with 0.00 as first option
puts[i].onchange = function(){calculateTotal(this);};
InitForm.deliveryorderform.selects.push(puts[i]);
} else if (puts[i].name === 'total') {
puts[i].onfocus = function(){this.blur();};
}
}
})();
</script>

eesyboi
02-13-2012, 01:26 PM
I appreciate your endless efforts…

I put the script just below the form like you suggested, so now it shows the £0.00 in the total field but the problem now is it doesn't calculate… I'm thinking am doing something wrong so i will tell you what i have done so far.

1. I have the script (the recent modified one) just below my form.
2. I have inserted the onload and onrest function to my body, (although there are also other functions in my onload event handler). I also tried the onload evene with onload="InitForm(form);" and with onload="InitForm();" but still not calculating.
3. I noticed you didn't include the hidden field in the recent modified script, so i try adding it and removing it but it still didn't calculate.
4. I also changed the $ sign to £ sign. (i don't think this is whats letting it not calculate)
5. I also noticed in the javascript that you have called the drop-down buttons with "selects" shouldn't it be "select"? This might be silly lool, as am just trying to figure out why its not calculating.
6. And i have the total field as read-only,

jscheuer1
02-13-2012, 03:56 PM
Almost there, I forgot about those radios for, when do you want it as on my test mock up of your form, they were not checked.

Also I noticed a problem with the variable form used by the script. It appeared to conflict either with another of the same name elsewhere or some element of the DOM.

So I added a test of the radio buttons to make sure their values were numbers before including them and wrapped the entire code in an anonymous function (extended the one we had actually to cover all of the code) so there would be no conflicts as far as the variable names go.

Another thing, I changed £ (two places) to \xa3 as this should render correctly regardless of encoding. If it doesn't, change it back to £

And, get rid of this:


<script>
//change two names below to your form's names
document.forms.deliveryorderform.agreecheck.checked=false
</script>

It's not doing anything because there is no agreecheck box or button.

This code works with your form on your page as it was when I typed this:


<script type="text/javascript">
// Calculate the total for items in the form which are selected.
(function(){
function calculateTotal(inputItem) {
var calculatedTotal = 0, i, form = inputItem.form, tot,
formObj = InitForm[form.getAttribute('name')], radios = formObj.radios, selects = formObj.selects;
for (i = radios.length - 1; i > -1; --i){
if(radios[i].checked){
calculatedTotal += +radios[i].value;
}
}
for (i = selects.length - 1; i > -1; --i){
calculatedTotal += +selects[i].value;
}

// Set total field(s) to total value.
tot = formatCurrency(calculatedTotal);
form.total.value = tot;
/* for (i = form.total.length - 1; i > -1; --i){
form.total[i].value = tot;
} */
}

// Format a value as currency.
function formatCurrency(num) {
num = num.toString(10).replace(/[$,]/g,'');
if(isNaN(num)){num = 0;}
return ((num == (num = Math.abs(num))?'':'-') + '\xa3' + num.toFixed(2));
}

// This function initialzes all the form elements to default values.
function InitForm(form) {
// Reset values on form.
var tots = form.total, els = form.elements, i;
/* for (i = tots.length - 1; i > -1; --i){
tots[i].value = '$0.00';
} */
tots.value = '\xa30.00';

// Set all checkboxes and radio buttons on form to unchecked.
for (i = els.length - 1; i > -1; --i){
if (els[i].checked) {
els[i].checked = false;
} else if (els[i].tagName.toLowerCase() === 'select'){
els[i].options.selectedIndex = 0;
}
}
}


var form = document.forms.deliveryorderform, puts = form.elements;
InitForm(form);
InitForm.deliveryorderform = {selects: [], radios: []};
form.onreset = function(){InitForm(this); return false;};
for (var i = puts.length - 1; i > -1; --i) {
if (puts[i].type === 'radio' && !isNaN(puts[i].value)) {
puts[i].onclick = function(){calculateTotal(this);};
InitForm.deliveryorderform.radios.push(puts[i]);
} else if (puts[i].tagName.toLowerCase() === 'select' && puts[i].options[0].value === '0.00') { // grabs all select elements with 0.00 as first option
puts[i].onchange = function(){calculateTotal(this);};
InitForm.deliveryorderform.selects.push(puts[i]);
} else if (puts[i].name === 'total') {
puts[i].onfocus = function(){this.blur();};
}
}
})();
</script>

If you've changed the form since then, there might be new problems.

eesyboi
02-13-2012, 05:15 PM
Wow finally, thank you thank you.. It worked just fine..

I was wondering what i should be aware of if am to add or change anything to the form or page.

I'm actually looking to add a payment processor if i find one, so i will be adding some new form elements like a radio button for On cash delivery and another for Credit Card payment, the credit card payment will be invisible until the radio button is checked. So i wa wondering if this will affect and if it will what would i need to change.

By the way, I enabled the total box for three <fieldset> and it worked fine also.

jscheuer1
02-13-2012, 05:26 PM
As long as any added radios or selects don't fit the profile, they will be ignored. For a radio to qualify its value must pass the !isNaN() test, that means if its value is not a number, it will be ignored. A select to qualify must have as its first option an option with a value of "0.00".

From what you're saying, these new elements should pose no problem. If they do, let me know.

eesyboi
02-13-2012, 09:28 PM
Alright i will let you know if it does. I appreciate...

eesyboi
02-13-2012, 10:04 PM
Sorry to bother, I just noticed that the script doesn't work when i add the uk postcode address finder script to the form. Its meant to be next to the postcode field, like this


<SCRIPT LANGUAGE=JAVASCRIPT SRC="http://services.postcodeanywhere.co.uk/popups/javascript.aspx?account_code=indiv65370&license_key=fd84-xd49-mj49-mn94"></SCRIPT>
It works without the <script>

jscheuer1
02-14-2012, 12:46 AM
That script adds a select to the form. It doesn't qualify for inclusion in the calculateTotal function. But because it has no options when our script tests it to see what the value of its first option is, it throws an error that stops our script dead in its tracks. Easy fix though. In our code, find this line and add the highlighted:


} else if (puts[i].tagName.toLowerCase() === 'select' && puts[i].options[0] && puts[i].options[0].value === '0.00') { // grabs all select elements with 0.00 as first option

At least that fixed it on a copy of your page with our script when I added the script tag from your last post just after the postalcode input.

If there's still a problem, please put up a demo page that shows the problem and post a link to it.

eesyboi
02-14-2012, 12:37 PM
Thank you, its working now... :)