Allow a selected option to pull data from one field in a form and place it in another

JavaScript
1

hi

lets say i have this form:



<html>
<body>
<form name="x">
<table>
<tr><td>
        First name: <input name="fname">
  <tr><td>
  Last name: <input name="lname">
  <tr><td>
Choose: <select name="tst" id="tst">
<option value="0"># M</option>
<option value="1" >1</option>
 <option value="2" >2</option>
</select>

 <tr><td>
  Your Selection: <input name="choose">

</table>
</body>
</html>

what i want to do is have a selection from ‘tst’ trigger an input into ‘choose’ from the data inputted into the ‘fname’ and ‘lname’ fields.

for example, i want option ‘1’, when selected to draw the input from ‘fname’ and place it into ‘choose’

or i might want to select the data in ‘lname’ instead, so i will tie option 2 to it, so when the user selects option 2 the contents of ‘lname’ go into ‘choose’ instead.

i hope this isnt too tricky. the simplest way to do it the better; html, java, etc.

2

You need to put the references to the input boxes as the values of the select options. The following script does this for you.

[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>

<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Select First & Last Names</title>
<script type=“text/javascript”>
<!–
function getSelect(obj)
{ // invalid selection
if(obj.selectedIndex==0){return; }
// ----------
// ref to input name stored in select options
var myChoiceRef=obj.options[obj.selectedIndex].value;
// set value of myChoice result box using reference to either first or last name
document.myForm.myChoice.value=document.myForm[myChoiceRef].value ;
}
//–>
</script>
<style type=“text/css”>
<!–
body { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
form { margin-top:50px; width:600px; }
fieldset { padding:10px; }
#result { color:#F00; }
#wrap { position:relative; top:0px; left:0px; width:900px; height:500px; margin-left:100px; }
–>
</style>
</head>

<body>

<div id=“wrap”>
<form name=“myForm”>
<fieldset>
<legend>Input first and last name here</legend>
First Name: <input type=“text” name=“Fname” value=“aaaaa” size=“20”>
 LastName: <input type=“text” name=“Lname” value=“bbbbbb” size=“20”></fieldset>
<p><select name=“mySelect” onchange=“getSelect(this)”>
<option>Select here</option>
<option value=“Fname”>First name</option>
<option value=“Lname”>Last Name</option>
</select></p>
<p><br>
Your Selection: <input id=“result” name=“myChoice” size=“20”></p>
<p><input type=“reset” name=“Reset Form”> </p>
</form>
<!-- end form –>
</div>
<!-- end wrap –>

</body>

</html>

3

It’s relatively straight forward.

You also have some invalid html code.


<html>
    <head>
        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                document.getElementById('tst').onchange=function(){
                    document.getElementById('choose').value = '';
                    if(this.selectedIndex == 0){return;}
                    document.getElementById('choose').value = document.getElementById(this.value).value;
                }
            }
        </script>
    </head>
    <body>
        <form name="x">
            <table>
                <tr><td>First name: <input type="text" name="fname" id="fname"></td></tr>
                <tr><td>
                        Last name: <input type="text" name="lname" id="lname"></td></tr>
                <tr><td>
                        Choose: <select name="tst" id="tst">
                            <option>Choose option</option>
                            <option value="fname" >1</option>
                            <option value="lname" >2</option>
                        </select>
                    </td></tr>
                <tr><td>
                        Your Selection: <input type="text" name="choose">
                    </td></tr>
            </table>
    </body>
</html>
4

@webdev:

I fixed your code. I was getting errors from your code:

<html>
	<head>
		<title></title>
	</head>
	<body>
		<form name="x">
			<table>
				<tr>
					<td>First name: <input type="text" name="fname" id="fname"></td>
				</tr>
				<tr>
					<td>Last name: <input type="text" name="lname" id="lname"></td>
				</tr>
				<tr>
					<td>Choose: 
						<select name="tst" id="tst">
							<option>Choose option</option>
							<option value="fname" >1</option>
							<option value="lname" >2</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>Your Selection: <input type="text" name="choose"></td>
				</tr>
			</table>
		</form>
		<script type="text/javascript">
			window.onload = function() {
				document.getElementById('tst').onchange = function() {
					document.x.choose.value = '';
					if(this.selectedIndex == 0) return;
					document.x.choose.value = this.value;
				}
			}
		</script>
	</body>
</html>