Adding the contents of a form with 'OnChange'?

C

Cheddar

I'm having trouble creating a very simple running total of a
few drop down list. I have three seperate dropdown lists, I
want the user to simply select some numbers and have the
total of the selected numbers displayed.

I'm not much of a programmer and this is really just a
experiment. Can anyone help me out here. I know the code
below doesnt work (no form tags etx0 but I thought the logic
was fine?

Example of what I would like to happen

User selects 2,5,6 and a total of 13 is displayed somewhere
on the page. This total changes when the user picks
different numbers.

Can anyone help me out here?

------------------------------------------------------------
--------
Code

</head>
<script language="javascript">
function workit()
{
var itemA=document.select.value
var itemB=document.select2.value
var itemC=document.select3.value
var total = itemA+itemB+itemC;
}
</script>
<body>
<p>
<select name="select" onChange="workit()">
<option value="1" selected>One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select name="select2" onChange="workit()">
<option value="4" selected>Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
<select name="select3" onChange="workit()">
<option value="7" selected>Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>
</p>
<p><span id=mytotal></span></p>
</body>
</html>
 
R

Reply Via Newsgroup

I've been picking up javascript these past six months - I think my
single line below should do what you want to do, though you might find
one or two others who might correct my methods...
</head>
<script language="javascript">
function workit()
{
var itemA=document.select.value
var itemB=document.select2.value
var itemC=document.select3.value
var total = itemA+itemB+itemC; document.getElementById('mytotal').innerHTML=total;
}
</script>
<body>
<p>
<select name="select" onChange="workit()">
<option value="1" selected>One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select name="select2" onChange="workit()">
<option value="4" selected>Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
<select name="select3" onChange="workit()">
<option value="7" selected>Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>
</p>
<p><span id=mytotal></span></p>
</body>
</html>
Click to expand...

Hope I've helped,
randelld
 
C

Cheddar

Reply said:
I've been picking up javascript these past six months - I think my
single line below should do what you want to do, though you might find
one or two others who might correct my methods...
Click to expand...

thanks m8, I will give it a go.
 
M

Morris

Cheddar said:
I'm having trouble creating a very simple running total of a
few drop down list. I have three seperate dropdown lists, I
want the user to simply select some numbers and have the
total of the selected numbers displayed.

I'm not much of a programmer and this is really just a
experiment. Can anyone help me out here. I know the code
below doesnt work (no form tags etx0 but I thought the logic
was fine?

Example of what I would like to happen

User selects 2,5,6 and a total of 13 is displayed somewhere
on the page. This total changes when the user picks
different numbers.

Can anyone help me out here?

------------------------------------------------------------
--------
Code

</head>
<script language="javascript">
function workit()
{
var itemA=document.select.value
var itemB=document.select2.value
var itemC=document.select3.value
var total = itemA+itemB+itemC;
Click to expand...

Try this instead:
function workit()
{
var itemA = parseInt(select.options[select.selectedIndex].value);
var itemB = parseInt(select2.options[select2.selectedIndex].value);
var itemC = parseInt(select3.options[select3.selectedIndex].value);

var total = itemA + itemB + itemC;
mytotal.innerHTML = total;
}
 
C

Cheddar

Morris said:
Try this instead:
function workit()
{
var itemA = parseInt(select.options[select.selectedIndex].value);
var itemB =
Click to expand...
parseInt(select2.options[select2.selectedIndex].value); var
itemC
= parseInt(select3.options[select3.selectedIndex].value);

var total = itemA + itemB + itemC;
mytotal.innerHTML = total;
}
Click to expand...

Good stuff, thanks a lot.
 
D

Dr John Stockton

JRS: In article <[email protected]>, seen in
news:comp.lang.javascript said:
Try this instead:
function workit()
{
var itemA = parseInt(select.options[select.selectedIndex].value);
Click to expand...

But only after considering whether the string .value might have a
leading zero, and what (a) might happen, (b) is needed, in that case.

Read the FAQ.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Add Image and label dynamically inside the dropdown 2
action_page.php form 2
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to display input options only after selecting an option from the 'select class' tag JS? 6
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Survey details won't go through using php, ajax, Mysql 3
problem with form getting submitted 8
How do I fix this issue in sqaurespace code block? 1

Members online

No members online now.
Total: 266 (members: 1, guests: 265)
Robots: 355

Forum statistics

Threads
474,438
Messages
2,571,699
Members
48,796
Latest member
Greg L.

Latest Threads

Top