Calculator almost works...need help please 1

[imeldesign]

I am doing a survey form for a client. Easy enough. However, in one section they have 8 questions that have you rate an event on a scale of 1 to 5. They want a total of the numbers from the 8 questions.
I found a great javascript that works and does this perfectly.

However, the script will NOT work if there are any other fields in the form...i.e text areas. I get a NaN return in Safari but nothing in Firefox.
The script is:
<script>
calculate = function(totalElement)
{
if (totalElement)
{
var calculation = '';
var overall = '';
var fields = new Array();
var theElement = document.getElementById(totalElement);
var userInputs = myform.elements;
var the_type = '';
for (var f = 0; f < userInputs.length; f++)
{
if (userInputs[f].className=='special_value')
{
if (userInputs[f].type=='select-one')
{
if(userInputs[f].options[userInputs[f].selectedIndex].value)
{
fields[f] = userInputs[f].options[userInputs[f].selectedIndex].value;
}
else
{
fields[f] = 0;
}
}
else if(userInputs[f].type=='radio' || userInputs[f].type=='checkbox')
{
if (userInputs[f].checked)
{
fields[f] = userInputs[f].value;
}
else
{
fields[f] = 0;
}
}
else
{
if (userInputs[f].value)
{
fields[f] = userInputs[f].value;
}
else
{
fields[f] = 0;
}
}
}
}

for (var i=0; i<fields.length; i++)
{
calculation += fields;

if (i!=fields.length-1)
{
calculation += '+';
}
}

if (calculation!='')
{
overall = eval(calculation).toFixed(2);
}

if (overall!='')
{
theElement.innerHTML = overall;
}
}
}
</script>

The working form without other fields is at

http://imeldesign.com/code2.html

The entire form is at

http://imeldesign.com/code1.html

Any help would be greatly appreciate. Once I have this part working I can finish the form action.

 

[BillyRayPreachersSon]

The problem lies in this line:

var userInputs = myform.elements;

"userInputs" contains all of the form elements, not just the radio buttons you want to work with.

There are many ways around this, most involving how to filter out the elements you do not want in the "userInputs" array.

One way would be to skip any input element that isn't a radio button. However, you might find later that you have other radio buttons you do not wish to include.

Probably the easiest way is to give all your radio buttons a class and use that class to populate your "userInputs" array. But wait - you already have a class on them, so that's half the battle won.

There are many takes on how to get elements by their class name, and most (if not all) JS frameworks provide methods. If you are using such a framework, then I'd run with that. If not, try something like this: faq216-6104, and then use this:

var userInputs = getElementsByClassName('special_value');

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[BillyRayPreachersSon]

You know how it goes when you think the problem is one thing and it turns out not to be... Well, ignore my above advice - I clearly didn't read your code before replying

The problem with the code above is still the line I pointed out:

var userInputs = myform.elements;

But for a different reason: "myform" is never defined anywhere.

You need to assign "myform", most likely like this:

myform = document.getElementById('myform');

If you'd looked in the Firefox error console, you would have seen the error "myform is not defined" which says it all.

Having said that, you said that it worked fine in Firefox without the other fields. Visiting the page in question, this is not the case at all, as myform is still undefined on that page as well.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[imeldesign]

thanks...I gave up on the above script before I got your reply. I ended up finding a JQuery script and had it running in about 10 minutes..

Thanks....javascript is on my list of things to learn but work comes first.

 

[imeldesign]

I spoke too soon...the script works fine but I need to be able to pass the total onto an html email template. Since the total is displayed in a p tag instead of a field I am at a loss on how to pass it to the template without it being a form field.
The live working form (minus the submit button) is at

http://www.callahangic.org/eval.html

I know is is probably a simple thing but I am still learning.

 

[vacunita]

If the P tag has an ID you can access the p tags contents using its innerHTML property.

var thevalue=document.getElementById('ptagID').innerHTML;

...
<p id="ptagID">The Value is here</p>

You could of course always change the code to output to a form field instead if you wish.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[imeldesign]

I prefer "You could of course always change the code to output to a form field instead if you wish. " which is what I have been trying to figure out how to do...

 

[vacunita]

Something along the lines of:

<input type=text class="total" value="Total:00">


and in the jquery code:

change this line:
[gray]// $("p.total").html("Total: <strong>" + total + "</strong>"); [/gray]

to

$("input.total").val("Total: " + total);

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[imeldesign]

Fabulous! Works like a charm...Have a star