onchange not triggering function 1

AndyGroom · Mar 18, 2010

I've got an 'order form' on screen which I want to recalculate the total for each time the user chooses something from one of the droplists, however I can't understand why it doesn't call the recalc function.

(The order form has 10 lines, I've shown the first line only here for brevity).

Code:

<script type='text/javascript' language='javascript'>

function createorderform()
{
  var item = new Array();
  item[0]='Select an item...|0';
  item[1]='Bugle Beads Red BB1 023|0.60';
  item[2]='Bugle Beads Blue BB1 025|0.80';

  for (y=1;y<11;y++)
  {
    for (x=0;x<item.length;x++)
    {
      var opt = document.createElement("option");
      document.getElementById('line' + y).options.add(opt);
      args = item[x].split('|');
      opt.text = args[0];
      opt.value = args[1];
      if (x==0) opt.selected='selected';
    }
    for (x=1;x<21;x++)
    {
      var opt = document.createElement("option");
      document.getElementById('qty' + y).options.add(opt);
      opt.text = x;
      opt.value = x;
      if (x==1) opt.selected='selected';
    }
  }
  recalc();
}

function recalc()
{
  var total=0;
  var itemtotal=0;
  for (x=1;x<11;x++)
  {
    itemtotal=(document.getElementById('line'+x).value * document.getElementById('qty'+x).value);
    document.getElementById('tot'+x).innerText='£' + itemtotal;
    total=total+itemtotal;
  }
  document.getElementById('total').innerText='£' + total;
}
</script>

<body onLoad='createorderform();'>

<table id='customers'>
<tr><th>Item</th><th>Quantity</th><th>Price</th></tr>

<tr><td>
<select onchange='recalc()' class='item' id='line1'>
</select>
</td><td>
<select onchange='recalc()' class='qty' id='qty1'>
</select>
</td><td class='price'><span id='tot1'></span></td></tr>

<tr><th></th><th>Sub-total:</th><th><font color='#000000'><span id='total'></span></th></tr>

</table>

- Andy
___________________________________________________________________
If you think nobody cares you're alive, try missing a couple of mortgage payments

tsuji · Mar 18, 2010

[0]
>document.getElementById('total').innerText='£' + total;
Better use innerHTML for less worry on cross-browser support. (But, ff now seems support innerText for span, at least and maybe more...)
[tt]document.getElementById('total').innerHTML='£' + total;[/tt]

[1] Functionally, have to parse for number.
>itemtotal=(document.getElementById('line'+x).value * document.getElementById('qty'+x).value);
[tt]itemtotal=[red]parseFloat[/red](document.getElementById('line'+x[red],10[/red]).value * [red]parseInt([/red]document.getElementById('qty'+x).value[red],10[/red]);[/tt]

[2] I would say, wrap the table with a form tag. It makes more sense. (It was once causing problem of rendering, but long been causing no problem. But, structurally, form field elements should be descendants of form element.)

[3] Now, this is the more tricky. Rename recalc() to something else, such as recalculate() or whatever. recalc() seems collide with something. It is accepted when called from within a function such as onload handler, but as a event handler itself, it causes problem in ie.

AndyGroom · Mar 18, 2010

Thanks for the feedback and tips!

I renamed the function to something other than recalc and it works fine now.

- Andy
___________________________________________________________________
If you think nobody cares you're alive, try missing a couple of mortgage payments

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

onchange not triggering function 1

AndyGroom

Programmer

tsuji

Technical User

AndyGroom

Programmer

Similar threads

Part and Inventory Search

Sponsor