Dynamic Selection Box That Writes An Answer [Archive]

mrmbarnes

03-18-2004, 02:54 AM

Hi All

I am not that advanced with JavaScript but learning everyday.

I have a JavaScript that writes the selection of a dropdown box into a textbox.

I want to add it to a PHP page that will add this script for every result in the database.

If I have only 1 entry the script works fine:

<script language="JavaScript">function insertMenuItem(){

document.f.name.value = document.f.insertItem.options[document.f.insertItem.selectedIndex].text;
document.f.link.value = document.f.insertItem.value;

}</script>

<input type=text value='' name=link size=25>

<select name=insertItem><option value=layout-1.php?ID=4>Layout 1</option><option value=layout-2.php?ID=4>Layout 2</option></select> <input type=button value='Insert' onclick=insertMenuItem()>

If I add another it no longer works:

<script language="JavaScript">function insertMenuItem(){

document.f.name.value = document.f.insertItem.options[document.f.insertItem.selectedIndex].text;
document.f.link.value = document.f.insertItem.value;

}</script>

<input type=text value='' name=link size=25>

<select name=insertItem><option value=layout-1.php?ID=4>Layout 1</option><option value=layout-2.php?ID=4>Layout 2</option></select> <input type=button value='Insert' onclick=insertMenuItem()>

<select name=insertItem><option value=layout-1.php?ID=5>Layout 1</option><option value=layout-2.php?ID=5>Layout 2</option></select> <input type=button value='Insert' onclick=insertMenuItem()>

I need to get this script working so there is the option of having may dropdown boxes that will all write to the link box when the insert button is clicked.

Any help or suggestions would be great.

Many Thanks

David Harrison

03-18-2004, 08:57 AM

Both selections have the same name so you have nothing to distinguish between them. Use this script instead:

<script type="text/javascript"></script>

</head>

<body>

<form action="#">

<p>

<input type="text" value="" id="link" size="25"><br><br>

<select id="insertItem1">
<option value="layout-1.php?ID=4">Layout 1</option>
<option value="layout-2.php?ID=4">Layout 2</option>
</select>

<input type="button" value="Insert 1" onclick="insertMenuItem('insertItem1');"><br><br>

<select id="insertItem2">
<option value="layout-1.php?ID=5">Layout 1</option>
<option value="layout-2.php?ID=5">Layout 2</option>
</select>

<input type="button" value="Insert 2" onclick="insertMenuItem('insertItem2');">

</p>

</form>

The two buttons are now id'd insertItem1 and insertItem2, I have given the buttons values of Insert 1 and Insert 2 to correspond to these.
In each button the event handlers have changed a little, now you have to put in the id of the select button you want to get the text from. Note the use of id's as this allows for easier accessing of the form elements.