[RESOLVED] calculating total from radio button values

[woodplease]

i'm using php to display radion buttons, each with a different value(values taken from a database), and then i'm using javascript to calculate these values, and the displaying the results in a text box, except it is not calculating or displaying the result. Could anybody help with this?
the php that creates the radio buttons

 
$result3 = pg_query($query2) or die ("Query failed");
	//let's get the number of rows in our result so we can use it in a for loop
	$numofrows2 = pg_num_rows($result3);

for($j = 0; $j < $numofrows2; $j++) {
	$row2 = pg_fetch_array($result3); //get a row from our result set

	echo "
	<p>Answer ".$row2['answerno']." : <input type=\"radio\" name=\"" . $row['questionno'] . "\" id=\"" .$row2['answerref'] ."\" value=\"" . $row2['answervalue'] . "\"  >".$row2['answer']."</p>

	\n";

}

}
	echo'
<input type="button" name="process" onclick="UpdateCost()" value="Calculate Total"/>
<input type="text" id="total" value="0.00" style="background-color:#999999"/>';
?>

the javascript that is supposed to calculate the total

function UpdateCost() {
  var sum = 0;
  var gn, elem;
  for (i=0; i<10; i++) {
    gn = 'answerref'+i;
    elem = document.getElementById(gn);
    if (elem.checked == true) { sum += Number(elem.value); }
  }
  document.getElementById('total').value = sum.toFixed(2);
} 

Thanks

[johanafm]

Hard to say, since it could be anything. My suggestion is that you check what js error you get. My guess is that it will be something along the lines of "elem is null".

[woodplease]

no error is dispalyed, as i'm using a button to update the cost. is it possible to use php to calculate the total value of the selected radio buttons?

[paulnaj]

Hi Woodplease,

Your js function is expecting the id's to be of the foem 'answerref'+i - but it's not clear from the code if that's what actually being done. View the source in the browser and look for the ids of the radio's.

Alternatively, you could add a class attribute to each radio (no need here now for an id), and use 'document.getElementsByTagName()' to find them. Something like ...

<?php
for($j = 0; $j < $numofrows2; $j++) {
	$row2 = pg_fetch_array($result3); //get a row from our result set
	echo '
	<p>
		Answer '.$row2['answerno'].' :
		<input type="radio" class="question" name="'.$row['questionno'].'" value="'.$row2['answervalue'].'">'.$row2['answer'].'
	</p>
'; // Notice how cutting in/out of SINGLE-QUOTES is much easier to read and debug
}

Javascript:

function UpdateCost() {
	var sum = 0;
	var a = document.getElementsByTagName('INPUT');
	for(var i = 0; i < a.length; i++){
		var elem = a[i];
		if(elem.type == 'radio' && elem.className == 'question' && elem.checked == true){
			sum += Number(elem.value); 
		}
	}
	document.getElementById('total').value = sum.toFixed(2);
}

Hope that helps.
P.

[woodplease]

the id was generated using the "answerref" from a table. I've tried using the code you suggested but it doesnt work. I've uploaded it to the net so you can see what it looks like.

http://users.aber.ac.uk/agd8/quizdom/answertestv4.php?id=1

[johanafm]

woodplease;10941035 wrote:

no error is dispalyed

Using the appropriate tools will give you the encountered error, which both Firefox and IE8 can do. In firefox, Tools->Error console will give you a window showing all errors and warnings in javascript and css. My definite favorite browser for development is Firefox with the Firebug addon installed.

With your current page, FF's error console tells me that

Error Console wrote:

document.getElementById("total") is null

And indeed, looking at the code, you have an id="totalVal", but not id="total"

[paulnaj]

You should learn how to debug scripts.

Use firefox as your development browser and get the Error console up. It will help you find errors.

For example, you changed the id="total" in the HTML to id="totalVal" without changing it in the script.

[paulnaj]

Wow, johan - we are of one mind.

[johanafm]

🙂

[woodplease]

omg, thanks, i should have noticed that, i changed the id when i was testing something else, and forgot to change it back. Thanks very much