radio or checkbox

[colinod]

I have the following code that adds up amounts if checked using a checkbox

<script type="text/javascript">
function calculate(f)
{
var nums = f.num;
var ntext = f.num;
var result = 0;
for(var i=0;i<nums.length;i++)
{
if(nums[i].checked)
{
result+=parseFloat(ntext[i].value);
}
}
f.answer.value=Number(result).toFixed(2);
}
</script>

it can be seen here http://www.yaketyyakallmouth.com/rad...enew/index.asp

problem is when you have the two selections next to each other we really only want one to be selected so i thought of using radio selectors instead but they use the name to group them together and this is used by the code above to add the amounts together.

any ideas around this

[Dormilich]

jepp, using events on each radio that de/increments the value. see addAmount()

[colinod]

i found out that if i changed the id tag in the radio button to num and used the name as a field in the database that groups the stations together that works.

[Dormilich]

although it may work, it is dead wrong from the HTML point-of-view. since ids must be unique, you cannot substitute id for name. additionally, you can’t deselect a radio group, once it has been checked.

try getElementsByTagName() or getElementsByClassName()

[colinod]

i dont see what effect that will have if the page works?

and as i am useless with javascript i dont know what to do?

[Dormilich]

crossing a red traffic light does work too, until you get run over by a car.

give all the radios/checkboxes that should be calculated a common class name. employing the method document.getElementsByClassName() you can loop through that list to add the values.

the other approach is the incremental addition/subtraction of the currently clicked radio/checkbox (see your other thread). it only requires the events to be attached to every radio/checkbox, which can be accomplished in a similar manner.

[colinod]

problem i have is my lack of knowledge, the javascript i am using was not written by me just found it on the internet so am not sure how to change it to use document.getElementsByClassName() etc.

[colinod]

I am also trying to reset both the form and the total, i can reset the form but it only sets it back to the total carried over from another page? and if i reset the total as soon as i click another checkbox it adds that to the total carried over too

The javascript for keeping the totals is now with the result coming from the previouse pages total answer

<script type="text/javascript">
function calculate(f)
{
var nums = f.num;
var ntext = f.num;
var result = <%= request.form("answer")%>;
for(var i=0;i<nums.length;i++)
{
if(nums[i].checked)
{
result+=parseFloat(ntext[i].value);
}
}
f.answer.value=Number(result).toFixed(2);
 }
</script>
 

and the code for zeroing the total is

<SCRIPT language="javascript">
function setzero(f)
{
var result = 0;
document.getElementById("total").value = Number(result).toFixed(2);
}
</SCRIPT>

this works but only zeros the total in the text element of the form with the id "total" as soon as i add anything again its wrong. i am sure this is because of the request in asp in the script above but cant figure it out

[Dormilich]

does that mean you didn’t learn anything from your previous threads?

this works but only zeros the total in the text element of the form with the id "total" as soon as i add anything again its wrong.

obviously, the result variable set by ASP is still unchanged (and you always add on this)

[colinod]

i have tried but cant always get my head around it

[Dormilich]

with the current design of calculate() you won’t solve that problem.

[colinod]

any ideas on where to try? or is this down to me trying to figure out the document.getElementById way of doing this

[Dormilich]

it has nothing to do with getElementById(). check out your calculate() function. every time you call it, it sums all checked values on top of the ASP value. clearing the text field to zero does not affect this in any way.

[colinod]

hi i am trying to set the variable that is from the asp outside the function, i gather that should be the way to go but i keep getting NaN as a result in my text field not sure what this means

[colinod]

Hi i now have script to do the calculation like this

<script type="text/javascript">
function UpdateCost() {
  var sum = document.write("<%= runtotal %>");
  var gn, elem;
  for (i=0; i<5; i++) {
    gn = 'id'+i;
    elem = document.getElementById(gn);
    if (elem.checked == true) { sum += Number(elem.value); }
  }
  document.getElementById('total').value = sum.toFixed(2);
} 
</script>

runtotal is got from asp from the form of the the previous page and that works

my form element is this

<INPUT  type="checkbox" name="num" id="id<%= stationcount %>" onClick="UpdateCost()" value="<%= nationalRecordset("amount") %>">

station count is incremented through my asp loop from database

the problem i have at the moment is that when i go from one page to the page i am trying this on and look at the code the sum has the right total but when i click on the heckbox it reloads the page and just writes the sum on a blank page

[Dormilich]

when i click on the heckbox it reloads the page and just writes the sum on a blank page

I’d need something to see to make a qualified comment.

[colinod]

if you men the actual pages try

http://www.yaketyyak.co.uk/radiousefee/news.asp

check some boxes and then go to the national page thats where i am trying things at the moment

[colinod]

sorted it change the

document.write("<%= runtotal %>")

to

"<%= runtotal %>" 

i am now getting object does'nt support this propert or method in line 36 char 3

document.getElementById('total').value = sum.toFixed(2);

[Dormilich]

i am now getting object does'nt support this propert or method in line 36 char 3

well, you try to access a Number method on a String object. this does not work.

[colinod]

i think you have lost me there!!!

[Dormilich]

try the following before that line

alert(typeof sum);

[colinod]

i gather this is string because of the fact i have made it from asp variables is there a way of converting it?

I have tried adding parsfloat('sum'"); in the line before but it still says its a string

[Dormilich]

because the function is called parseFloat(). you could also leave off the quotation marks, would be the same.

[colinod]

sorry that was my typing in the forum, what i actually have is theis

parseFloat('sum');
alert(typeof sum);

but it still says its a string, i have tried it without the quotes also

[Dormilich]

you are aware, that 'sum' is not the variable?

[colinod]

no i was not, just cant get this javascript, but am slowly learning, weird that i know asp though??

[Dormilich]

you don't want me to tell what I think of ASP ...

[colinod]

probably the same as me and javascript, what is the variable i really thought sum held the total

[Dormilich]

the variable is named sum just not within quotation marks, that would be then a string literal.

[colinod]

thanks for your help with all that, finally got it working and moving totals from page to page, i still have the same problem if you reset the form its not a problem but i was going to add a button to reset the total also but that does not want to work

the code for adding is now

function UpdateCost() {
  var sum = <%= runtotal %>;
  var gn, elem;
  for (i=0; i<5; i++) {
    gn = 'id'+i;
    elem = document.getElementById(gn);
    if (elem.checked == true) { sum += Number(elem.value); }
  }
  parseFloat(sum);
  document.getElementById('total').value = sum.toFixed(2);
} 

i have a feeling i have just gone round in a circle to end up with the same problem though

[Dormilich]

i have a feeling i have just gone round in a circle to end up with the same problem though

that’s correct.

you need a way to change line 2.

[colinod]

yes thats what i thought i think i may have to reload the page and reset the variable to 0 in asp

[Dormilich]

why so complicated?

[colinod]

its the only way i can think of doing it, judging by your answer i should look for something more simple

[colinod]

I have tried a few things and cant get anything to work, i have a feeling that passing a total to the variable from calling the function might work so this is what i have now, can you tell me if im in the right direction

This is the code for adding the total

<script type="text/javascript">
var runtotal = <%= runtotal %>;
  parseFloat('runtotal');
 
function UpdateCost(runtotal) {
  var gn, elem;
  for (i=0; i<200; i++) {
    gn = 'id'+i;
    elem = document.getElementById(gn);
    if (elem.checked == true) { runtotal += Number(elem.value); }
  }
  parseFloat('runtotal');
  document.getElementById('total').value = runtotal.toFixed(2);
}

and i am calling the function like this

<INPUT type="button" name="button2" id="button2" value="Reset Total" onClick="UpdateCost(0)">

[Dormilich]

er, why do you use runtotal as parameter? this way you won’t be able to change it. although that’s the direction I had in mind.

[colinod]

Im not sure i am just trying anything, i just cant see how to do this.

[Dormilich]

ok, some genral tips:

what you want
set the total amount to zero

what you have
- a function, that resets the "totals" field
- a global var named runtotal, populated onload by ASP
- some useless parseFloat() calls
- a (IMHO too complicated) function adding values on top of runtotal

problem (if you get this one right, that’s half the solution)
set runtotal to zero

solution
set the global var runtotal to zero AND don’t use its original value hardcoded

[colinod]

i can do all this but what happens when i want to keep the totals across all the pages as thats what the runtotal var populated by asp was for?

[colinod]

Just a bit different i have this code to set my global variable sum

<script type="text/javascript">
var sum = <%= runtotal %>;
  parseFloat('runtotal');
  </script>
 

This code then adds checked amounts to sum not using the asp amount i think!! after it was used to set the total above, i have also simplified it a bit, baring in mind my lack of knowledge

<SCRIPT language="javascript">
 
function UpdateCost() {
 
  var gn;
  for (i=0; i<5; i++) {
    gn = 'id'+i;
    if (document.getElementById(gn).checked == true) { sum += Number(document.getElementById(gn).value); }
  }
   parseFloat(sum);
  document.getElementById('total').value = sum.toFixed(2);
}

this code is called from a button to zero the amount which it does the alert returns a 0

<SCRIPT language="javascript">
function setzero()
{
 
var sum = 0;
 
document.getElementById("total").value = Number(sum).toFixed(2);
alert (sum);
}
 
</SCRIPT>

yet when i click something to add that amount to sum it still uses the original total even though my add coe only adda an amount to sum? am i wrong in thinking this?

[Dormilich]

the crux lies in the scope. setzero() uses a local variable named sum, leaving the global sum untouched.

and if you didn’t read the parseFloat() description yet, you should do so immediately.

[colinod]

i realised that about the sum variable and removed the var bit from the function, will check the use of parsfloat() later, thanks for your help

[colinod]

well now ive got all this working i am now being asked how people unselect things if the click the wrong selection, i have said it cant be done, so is there a way of unselectiong the radio button used in the code, or maybe changing the radio button to a checkbox but making them work like a radio group??

[Dormilich]

radioboxes do not unselect by themselves, but you can do that with a little help of JavaScript. i.e. set the checked property to false. however, there are many ways to implement that.

[colinod]

yesy i thought of just putting a reset button on each set but would that not then mess up my calculations

[Dormilich]

not necessarily, you can define buttons using <button>, or you can write your script in a way, that it doesn’t matter. you may not even require a button.

[colinod]

could i script it so if you clicked on a radio that is selected it would set it as unselected

[Dormilich]

yes, you can.

[colinod]

ok

My calculations are set with this code

function calculate(f)
{
var nums = f.num;
var ntext = f.num;
var result = 0;
for(var i=0;i<nums.length;i++)
{
if(nums[i].checked)
{
result+=parseFloat(ntext[i].value);
}
}
f.answer.value=Number(result).toFixed(2);

will a click event change this?

[Dormilich]

before I answer that … make an educated guess.

hint: check your event handlers