Multiple Listboxes on page won't work...

[sheldongold]

Hi,

I'm coding in PHP4 and MYSQL4 and there is a teensy bit of JS in there as well. I'm haveing trouble with my dropdown lists as when there is more than one on the page it just says 'error on page' when I click the button to add to quote. The user is supposed to be able to select whatever product they want from the dropdown, click a button to add the selection to the quotation. This adds the product to the quotation page through a IFRAME so that the user doesn't have to change pages when they order something and can continue with their quote.

OK. The code for the dropdown list is:

PHP Code:

        if (($lastrow == '3') && ($row['listtype'] != '3'))
        {
            echo    '</select><td>&nbsp;</td><td><input type="button" class="addtocart" name="B2" id="B2" value="Add to Quote" onclick="goToPage2()" />
</form></td></td>';
            echo    '<td>';
            echo    '</td></tr>';        
        }

<<<<<<<SOME OTHER CODE GOES HERE>>>>>>

    elseif ($row['listtype'] == '3')
    {
        if ($lastrow == '2')
        {
        echo    '<tr><td>&nbsp;</td><td>';
        echo    '<form name="form2" id="form2" action=""><select name="select2" size="1"><option value="none">Please select an option...</option><option value="show_cart.php?new=';
        echo    $row['productid'];
        echo    '">';
        echo    $row['description'];
        echo    ' - £';
        echo    $row['price'];
        echo    '</option>';
        $lastrow = $row['listtype'];
        }
        elseif ($lastrow == '3')
        {
        echo    '<option value="show_cart.php?new=';
        echo    $row['productid'];
        echo    '">';
        echo    $row['description'];
        echo    ' - £';
        echo    $row['price'];
        echo    '</option>';
        $lastrow = $row['listtype'];
        }
    } 


This is the JScript

<script type="text/javascript">
<!--
//Hide from Java Script
function goToPage2()
{
PageIndex2=document.form2.select2.selectedIndex
if (document.form2.select2.options[PageIndex2].value != "none")
{
parent.iframecart.location = document.form2.select2.options[PageIndex2].value
}
}
//-->
</script>

And this is the IFRAME:

<IFRAME name="iframecart" SRC="show_cart.php" height="1" width="1" style="display: none">
</IFRAME>

I am guessing that each listbox will have to have a unique id or name and that the button referring to it will share the unique name. Now I can do this by using the productid or even another incremental variable but how do I get the JS to use these variables??

My terrible workaround option is to just use a simple incremental variable in the PHP and then just make maybe 10 copies of the JS and tailor them to each possible outcome as it is highly unlikely I'll need more than 10 different drop downs per page. I know that's an ugly solution... That's why I need your help.

Thanks in advance!
Sheldon

[konithomimo]

give each object an ID. Then you can use a document call to access it. For instance, if you have three select lists, which you have given IDs of select1, select2, and select3:

<select id="select1">
. 
.
.
</select>
<select id="select2">
. 
.
.
</select>
<select id="select3">
. 
.
.
</select>

Then you use getElementById() to access each one:

var d1 = document.getElementById('select1');
var d2 = document.getElementById('select2');
var d3 = document.getElementById('select3');



Then to get their values you just do:

d1.value;
d2.value;
d3.value;

The other way, if you don't want to assign IDs to your select objects is to use getElementsByTagName();

var selects = document.getElementsByTagName('select');
var d1= selects[0];
var d2= selects[1];
var d3= selects[2];

That can be used instead of the way that we created d1,d2, and d3 earlier in this post.

[sheldongold]

I'm sorry, but I've read through that again and again and I just don't understand it. I am really not very good at this I'm afraid. Thanks for your help though.

Sheldon

[konithomimo]

Well, first things first, the above script is specific for only one drop down box, so i will use it as an example.

You have this:

<select name="select2" size="1">

so now give it an ID:

<select name="select2" id="select2" size="1">

now if you want to access it's value, or anything else about it, use the line:

var d2 = document.getElementById('select2');

that is the object, and it's value is:

d2.value;

so, if you have 'select2' on your page, and you want to alert it's value, then you would have a function like this:

function myalert()
{
var d2 = document.getElementById('select2');
alert(d2.value);
}

just place that between your header tags and then call it whenever you want to use it:

myalert()

An example with three alerts is:

<html>
<head>
<script type="text/javascript">
function myalerts()
{
var d1 = document.getElementById('select1');
var d2 = document.getElementById('select2');
var d3 = document.getElementById('select3');
alert(d1.value);
alert(d2.value);
alert(d3.value);
}
</script>
</head>
<body>
<form>
<select id="select1">
<option value="You chose this one">Choose One
<option value="You chose a new one">New One
<option value="You chose the last one">Last One
</select>
<select id="select2">
<option value="You chose this one">Choose One
<option value="You chose a new one">New One
<option value="You chose the last one">Last One
</select>
<select id="select3">
<option value="You chose this one">Choose One
<option value="You chose a new one">New One
<option value="You chose the last one">Last One
</select><br>
<input type="button" value="Run It" onclick="myalerts()">
</form>
</body>
</html>