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

**inosent** · Apr 1, 2011 23:38

hi

lets say i have this form:

Code:

<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.

**AllanP** · Apr 9, 2011 00:15

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

Code :

<!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"> 
    &nbsp;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>

**webdev1958** · Apr 9, 2011 03:27

Originally Posted by inosent

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

It's relatively straight forward.

You also have some invalid html code.

Code JavaScript:

<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>

**centered effect** · Apr 9, 2011 20:52

@webdev:

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

Code HTML4Strict:

<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>

User Tag List

Thread: allow a selected option to pull data from one field in a form and place it in another

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions