Jump to content

Select Box and Input Text


-Karl-

Recommended Posts

Okay so I have my select box:

 

		<select style="width: 200px; vertical-align: top; height: 143px;" id="background" name="members" size="7" onchange="changeEditMember(this)">
			<option value='option1'>option1</option>
	</select>

 

And my Javascript

		<script type=\"text/javascript\">
		function changeEditMember(membername) {
			var input_user = document.getElementById('input');
			input_user.src = ' + membername + ';
		}
	</script>

 

Then finally my input box

		<input type="text" id="sample">

 

 

 

What the script does, is I populate the select box from a database, and upon clicking an option, it will update the input box with the data from the select box. However, it's not funcitoning properly. I've managed to get the population of the select box to work, however, the input box remains unchanged. I'm quite new to Javascript, so I've probably done it wrong.

 

Any help is greatly appreciated.

Link to comment
https://forums.phpfreaks.com/topic/199042-select-box-and-input-text/
Share on other sites

I don't see what the purpose is. If the user selects a value in the select list - use that value. I see no need to populate a text field. But, maybe there is some reason you are not sharing.

 

A few problems.

 

1. "var input_user = document.getElementById('input');", the id of the text field is "sample" not "input"

2. "input_user.src", field objects do not have a src attribute. You want to set the "value"

3. input_user.src = ' + membername + '. If that worked, it would set the value to literally ' + membername + '. The quote marks tell the JS parser that it is a literal string.

4. You pass the select field OBJECT to the function and then attempt to set the value of the text field to that object. You need to get the VALUE of the select object

 

 

In the code below, the function is modified as well as the onchange trigger event in the select field.

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

function changeEditMember(selObj, textID)
{
    document.getElementById(textID).value = selObj.options[selObj.selectedIndex].value;
    return;
}

</script>
</head>
<body>

<select style="width: 200px; vertical-align: top; height: 143px;" id="background" name="members" size="7" onchange="changeEditMember(this, 'sample')">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
</select>
<br />
Text field: <input type="text" id="sample"><br />

</body>
</html>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.