SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.

  2. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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>

  3. #3
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by inosent View Post
    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>

  4. #4
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    @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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •