Learning : Loop to list all dropdown box values on a form

[Nick Calladine]

Learning : Loop to list all dropdown box values on a form

Can some one point me in the right direction :

I have a form which I want to loop through

I basically want to get all the selected values of the option tag

see example below

<select name=itemname3 size="1"
onchange="calculatetotal(document.myform)">
<option value="2800 {466.73}" selected>2800 AMD 64 </option>
<option value="3000 {478.18}">3000 AMD 64</option>
<option value="3200 {505.20}">3200 AMD 64</option>
<option value="3400 {515.14}">3400 AMD 64</option>
<option value="3700 {617.14}">3700 AMD 64</option>
</select>

so i want to be able to read the option value ("2800 {466.73)") of the
string if it has been selected or is the default value.

The selectname of the dropdown boxes are all labeled itemname and increment
from 3 to variable x

heres my code so far

function caculatetotal(frm)
var order = 0
var counter = 0
for (counter=0 ; counter <frm.element.length; ++x) {
form_field=frm.elements[counter]
form_fieldname = form_field.name
if (form_fieldname.substring(0,8) == "itemname") {

}
}
}

so i basically need to start the loop to detect itemname3 onwards.. but not
too sure how to do this...

anyhelp would be appreciated.

thanks

[Andrew Scott]

Nick Calladine wrote:

Learning : Loop to list all dropdown box values on a form

Can some one point me in the right direction :

I have a form which I want to loop through

I basically want to get all the selected values of the option tag

see example below

<select name=itemname3 size="1"
onchange="calculatetotal(document.myform)">
<option value="2800 {466.73}" selected>2800 AMD 64 </option>
<option value="3000 {478.18}">3000 AMD 64</option>
<option value="3200 {505.20}">3200 AMD 64</option>
<option value="3400 {515.14}">3400 AMD 64</option>
<option value="3700 {617.14}">3700 AMD 64</option>
</select>

so i want to be able to read the option value ("2800 {466.73)") of the
string if it has been selected or is the default value.

The selectname of the dropdown boxes are all labeled itemname and increment
from 3 to variable x

heres my code so far

function caculatetotal(frm)
var order = 0
var counter = 0
for (counter=0 ; counter <frm.element.length; ++x) {
form_field=frm.elements[counter]
form_fieldname = form_field.name
if (form_fieldname.substring(0,8) == "itemname") {

}
}
}

so i basically need to start the loop to detect itemname3 onwards.. but not
too sure how to do this...

anyhelp would be appreciated.

thanks

Hello Nick

If i understand you correctly you have X number of selects on a page.
And you want obtain their values.

You have a number of ways to achive this.

1. This is my prefered way, would be to give the selects an ID's each so
that you could use document.getElementById("mySelectId"). This returns
the element that has that ID (only one element can have a given ID).

2. Another is document.getElementsByName("mySelectName"), this returns a
collection of elements that match the given name ( any number of
elements can have the same name ).

3. Assuming that you only have selects on the page that you are
interested in would be to use
document.body.getElementsByTagName("select") this will return a
collection of all the select elements that are below body.

This is how i would do it based on your current nameing convention but
using ID's instead.

------------ SAMPLE CODE -------------

<select id="itemname0">.. options ..</select>
<select id="itemname1">.. options ..</select>
<select id="itemname2">.. options ..</select>
<select id="itemname3">.. options ..</select>
<select id="itemname4">.. options ..</select>
<select id="itemname5">.. options ..</select>
<script>

function caculateTotal()
{
for( var i = 0; i <= 5; i++ )
{
var eSelect = document.getElementById("itemname" + i)
if( eSelect != null )
{
alert( eSelect.value );
}
}
}

</srcipt>

-------------- END CODE --------------

HTH

Andy

[Nick Calladine]

------------ SAMPLE CODE -------------

<select id="itemname0">.. options ..</select>
<select id="itemname1">.. options ..</select>
<select id="itemname2">.. options ..</select>
<select id="itemname3">.. options ..</select>
<select id="itemname4">.. options ..</select>
<select id="itemname5">.. options ..</select>
<script>

function caculateTotal()
{
for( var i = 0; i <= 5; i++ )
{
var eSelect = document.getElementById("itemname" + i)
if( eSelect != null )
{
alert( eSelect.value );
}
}
}

</srcipt>

Hi Andy

Well i am sorry i been playing with this code all day long trying to get it
to work.. these are my first few days in javascript but i can get rid of the
error
here my code

it basically reports

Line:28
Char:1
Code:0
Error:Object expected

which points to the select line <select id="itemname0" name="processors"
size="1" onchange="total()">

can you help is it me ... aarrghh

Nick

<script>

function caculateTotal()
{
for( var i = 0; i <= 5; i++ )
{
var eSelect = document.getElementById("itemname" + i)
if( eSelect != null )
{
alert( eSelect.value );
}
}
}

</script>
</head>

<body>

<select id="itemname0" name="processors" size="1" onchange="total()">
<option value="No Processor {0.00}">Select Processor</option>
<option value="2800 {466.73}">2800 AMD 64</option>
<option value="3000 {478.18}">3000 AMD 64</option>
<option value="3200 {505.20}">3200 AMD 64</option>
<option value="3400 {515.14}">3400 AMD 64</option>
<option value="3700 {617.14}">3700 AMD 64</option>
</select> Processor Options <br>

</body>

[Andrew Scott]

Nick Calladine wrote:

------------ SAMPLE CODE -------------

<select id="itemname0">.. options ..</select>
<select id="itemname1">.. options ..</select>
<select id="itemname2">.. options ..</select>
<select id="itemname3">.. options ..</select>
<select id="itemname4">.. options ..</select>
<select id="itemname5">.. options ..</select>
<script>

function caculateTotal()
{
for( var i = 0; i <= 5; i++ )
{
var eSelect = document.getElementById("itemname" + i)
if( eSelect != null )
{
alert( eSelect.value );
}
}
}

</srcipt>

Hi Andy

Well i am sorry i been playing with this code all day long trying to get it
to work.. these are my first few days in javascript but i can get rid of the
error
here my code

it basically reports

Line:28
Char:1
Code:0
Error:Object expected

which points to the select line <select id="itemname0" name="processors"
size="1" onchange="total()">

can you help is it me ... aarrghh

Nick

<script>

function caculateTotal()
{
for( var i = 0; i <= 5; i++ )
{
var eSelect = document.getElementById("itemname" + i)
if( eSelect != null )
{
alert( eSelect.value );
}
}
}

</script>
</head>

<body>

<select id="itemname0" name="processors" size="1" onchange="total()">
<option value="No Processor {0.00}">Select Processor</option>
<option value="2800 {466.73}">2800 AMD 64</option>
<option value="3000 {478.18}">3000 AMD 64</option>
<option value="3200 {505.20}">3200 AMD 64</option>
<option value="3400 {515.14}">3400 AMD 64</option>
<option value="3700 {617.14}">3700 AMD 64</option>
</select> Processor Options <br>

</body>

Hi Nick

Read your line of HTML....

<select id="itemname0" name="processors" size="1" onchange="total()">

Note the : onchange="total()"

This is looking for a funciton called "total()"

Whereas the funciton you have pasted above is "caculateTotal()".

This would deffinaly cause an "Object Expected".

HTH

Andy

[Nick Calladine]

it the words of homer simpson

DOH

thanks andy... (works a teat now....)

[Stephen Chalmers]

Nick Calladine <n i c k c a l l a d i n e @ n t lw orl d . c o m (remove all spaces)> wrote in message
news:bb******************@newsfe1-win.ntli.net...

Learning : Loop to list all dropdown box values on a form

Can some one point me in the right direction :

I have a form which I want to loop through

I basically want to get all the selected values of the option tag

see example below

<select name=itemname3 size="1"
onchange="calculatetotal(document.myform)">
<option value="2800 {466.73}" selected>2800 AMD 64 </option>
<option value="3000 {478.18}">3000 AMD 64</option>
<option value="3200 {505.20}">3200 AMD 64</option>
<option value="3400 {515.14}">3400 AMD 64</option>
<option value="3700 {617.14}">3700 AMD 64</option>
</select>

so i want to be able to read the option value ("2800 {466.73)") of the
string if it has been selected or is the default value.

The selectname of the dropdown boxes are all labeled itemname and increment
from 3 to variable x

heres my code so far

function caculatetotal(frm)
var order = 0
var counter = 0
for (counter=0 ; counter <frm.element.length; ++x) {
form_field=frm.elements[counter]
form_fieldname = form_field.name
if (form_fieldname.substring(0,8) == "itemname") {

}
}
}

It's not clear in what form you want the data, or what if any operation you want to perform within the loop that
accesses it.
To take the subject line literally, the following minimum change to your presented code, alerts a list of specified
selected elements.
document.getElementById is not always available, so should not be used for accessing form elements.

function caculatetotal(frm)
{
var order = "";

for (var i=0 ; i < frm.elements.length; i++)
if (frm.elements[i].type=='select-one' && frm.elements[i].name.substring(0,8) == "itemname")
order += frm.elements[i].options[frm.elements[i].selectedIndex].value+"\n";

alert( order );

return order;
}

caculatetotal( document.forms['myform'] );

--
Stephen Chalmers
547265617375726520627572696564206174204F2E532E2072 65663A205451323437393134