writing a variable to a page

[colinod]

Hi

I have the following code and it works fine if i want the total to be in a form field but i want to write the amount to the webpage using document.write, have tried all sorts but cant get it to work

         <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>

can anyone help???

[Dormilich]

don’t use document.write(), use .appendChild() or .innerHTML (…).

[colinod]

Hi

Thanks for the advice, i am not really that good with javascript, better with asp but that wont help, can anyone either help with some code or point me to somewhere to read about it, thanks

[Dormilich]

if anyone would know, what you’re up to, there sure is some help possible. (the function does not explain much)

[colinod]

Sorry about that....

I am making a page that has a form with multiple checkboxes on it and when you check the box it adds the amount set to that box to a total, thats what this code does, what i want to do is be able to send that total to another page so that i can seperate the list of items in the form out into seperate types

[Dormilich]

update the total

// box refers to a representive checkbox
 
var total = 0;
 
function addAmount()
{
  if (this.checked)
  { // if the box is checked, add its value
    total += parseFloat(this.value);
  }
  else
  { // else subtract it
    total -= parseFloat(this.value);
  }
}
 
// for the sake of simplicity I use 1 checkbox and the standard functions
// repeat with every checkbox
 box.addEventListener("click", addAmount, false);

[colinod]

is this not the same as i first put on this thread just slightly different, surely my original post holds the amount i want in the variable result, i just cant get it to write to a page, i had it working but it refreshed the page and just gave me the total, i want to change some text on the page so that it changes as you click on the checkboxes

using this code

<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);
}
document.write(result);
}
</script>

[Dormilich]

@colinod
slight, but crucial differences

@colinod
If I knew, where (in terms of HTML) you want to output it, I could have thought of that earlier.

for now lets assume the simple case it were a text field.

var total = 0;
var out = document.getElementById("total");
 
function addAmount()
{
  if (this.checked)
  { // if the box is checked, add its value
    total += parseFloat(this.value);
  }
  else
  { // else subtract it
    total -= parseFloat(this.value);
  }
  out.value = total;
}
// event handling as above

edit: change the event type to "change"

[colinod]

Hi

Thanks but sorry to be a pain, i just cant see how this is different for getting the total in a variable, the page for all this is at

http://www.yaketyyakallmouth.com/radiousefee/index.asp

i populate all the checkboxes from a database in asp and just want to send the total from one page to another

as i said i am useless at javascript!!!!!

[Dormilich]

@colinod
this will update the totals field when one of the checkboxes is clicked/changed.
in the end you will always have a form field with the correct total.

and the total is also saved in a global variable as well (accessible from everywhere)

@colinod
submit the form?

@colinod
no need to worry, I started there as well.

[colinod]

yes i thought of submitting the form but if you look at the page we want to seperate all the sections in the right column into their own pages and have tabs for them at the top of the page and i did not think you could submit the form to various pages

[Dormilich]

you can have tabs AND all the checkboxes in the same page. if you’re only submitting the total, you can use a separate form element just for the submit button.

EDIT: I can’t think of a way without using Javascript…

[colinod]

so i could give the page for the action on eack button or tab using javascript and abviously retrieve the total from the textbox in the form on the next page?

[Dormilich]

you’ve lost me there

[colinod]

bad typing, i just meant i could set the page for the form action using javascript and get the totals from the form in the next page

just need to figure out how to set the action page for the form now

[Dormilich]

out of interest I did a benchmark on the two approaches.

result (tried with 1,000 and 10,000 elements):
adding up all values took between 100 and 111 milliseconds
adding a single value took between 0 and 10 milliseconds

the code I used

<script type="text/javascript">
// two div elements
var foo = document.getElementById("foo");
var bar = document.getElementById("bar");
 
// create 10,000 elements to query later
var p = document.createElement("span");
p.innerHTML = "1";
for (var i=0; i<10000; i++) {
    foo.appendChild(p.cloneNode(true));
}
p_list = foo.getElementsByTagName("span");
 
// test 1: add a single value
function test1()
{
    var anf = (new Date).getMilliseconds();
    run : {
        total = parseInt(document.getElementById("ich").value);
        total += parseInt(this.firstChild.data);
    }
    var end = (new Date).getMilliseconds();
    alert("Sum: " + total + " in " + (end-anf) + " ms");
}
// test 2: sum up over all elements
function test2()
{
    var total = 0;
    var anf = (new Date).getMilliseconds();
    for (var i=0; i<10000; i++) {
        total += parseInt(p_list[i].firstChild.data);
    }
    var end = (new Date).getMilliseconds();
    alert("Sum: " + total + " in " + (end-anf) + " ms");
}
// start tests on click
p_list[1].addEventListener("click", test1, false);
bar.addEventListener("click", test2, false);
</script>