Setting a textfield based on Dynamically populated drop-down

JavaScript
1

I’m using PHP / MySQL / javascript (very new to javascript)

I’m looking to set the value of a textfield based on the name (NOT value) of a drop-down. The drop-down is created dynamically from a recordset (see code below):

<select name=“mainStory” id=“mainStory”>
<?php
do {
?>
<option value=“<?php echo $row_rsMain[‘ID’]?>”<?php if (!(strcmp($row_rsMain[‘ID’], $_GET[‘programID’]))) {echo “selected=\“selected\””;} ?>><?php echo $row_rsMain[‘mainStory’]?></option>
<?php
} while ($row_rsMain = mysql_fetch_assoc($rsMain));
$rows = mysql_num_rows($rsMain);
if($rows > 0) {
mysql_data_seek($rsMain, 0);
$row_rsMain = mysql_fetch_assoc($rsMain);
}
?>
</select>

2

You would need to loop through each option of the drop-down comparing the text with your desired name.

The option property called text provides the text name of the option.

3

Not sure what you mean or where to begin. I am brand new to javascript. If anyone can provide sample code I’d appreciate it.

4

Actually, you don’t even need to loop through them, because that’s only if you want to set a drop-down based on some text.
Setting a field field based on a drop-down is relatively simple by comparison.

Here is a simple form with a drop down and a text field:


<form id="choosePet">
    <select id="pets">
        <option value="">Please choose...</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="hamster">Hamster</option>
    </select>
    <input name="pet">
</form>

The script gets a reference to the form, and from there to the drop down.
It then attaches an onclick event to the drop-down. That attached function sets the text field value to the text of the currently-selected option.



var form = document.getElementById('choosePet'),
    pets = form.elements.pets;

pets.onchange = function () {
    var form = this.form,
        pets = this,
        pet = form.elements.pet;
    pet.value = pets.options[pets.selectedIndex].text;
};
5

Can’t get it to work:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />
<title>Untitled Document</title>
<script language=javascript>
var form = document.getElementById(‘choosePet’),
pets = form.elements.pets;

pets.onchange = function () {
var form = this.form,
pets = this,
pet = form.elements.pet;
pet.value = pets.options[pets.selectedIndex].text;
};
</script>
</head>

<body>
<form id=“choosePet”>
<select id=“pets”>
<option value=“”>Please choose…</option>
<option value=“dog”>Dog</option>
<option value=“cat”>Cat</option>
<option value=“hamster”>Hamster</option>
</select>
<input name=“pet”>
</form>
</body>
</html>

6

Got it to work:

<script type="text/javascript">  
		function OnSelectionChanged (listBox){
			var selOption = listBox.options[listBox.selectedIndex];
			var textInput = document.getElementById ("result");
			textInput.value = selOption.text;
		}
</script>
7

When the script runs, nothing below it exists yet. You should put the script at the bottom of the body, just before the </body> tag.

Doing that is also a technique to speed up your web page, so it’s good advice to put scripts at the bottom.