SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Grabbing text from select boxes

    I found a piece of code a few days ago which allows me to grab the value from a select/option dropdown and dump that text into an input field.

    It works fine, however when I try to place two of them in a row, the text always goes into the second input box, not the first.

    Here's the code:
    HTML Code:
    <!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 profile="http://gmpg.org/xfn/1">
       <title>PixoPoint.com</title>
    </head>
    <body>
    
    <form method="post" action="" name="tcp_test">
    	<input type="hidden" name="action" value="update" />
    	<p>
    		<script type="text/javascript">function process(val) {document.getElementById('zoo').value = val;}</script>
    		<select name="bert" onchange="process(this.value)">
    			<option value="">Make a selection</option>
    			<option value="BOB">BOB</option>
    			<option value="">None</option>
    		</select>
    		<input type="text" name="" value="" id="zoo" />
    		<label>Graphical shadow</label>
    	</p>
    
    	<p>
    		<script type="text/javascript">function process(val) {document.getElementById('duh').value = val;}</script>
    		<select name="ernie" onchange="process(this.value)">
    			<option value="">Make a selection</option>
    			<option value="snuff">snuff</option>
    			<option value="">None</option>
    		</select>
    		<input type="text" name="" value="" id="duh" />
    		<label>Graphical shadow</label>
    	</p>
    </form>
    
    </body>
    </html>
    Does anyone know what I'm doing wrong here?

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Ryan,
    try the following:

    Code HTML4Strict:
    <!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 profile="http://gmpg.org/xfn/1">
       <title>PixoPoint.com</title>
    </head>
    <script type="text/javascript">
    	function process(val, id) {
     
    		document.getElementById(id).value = val;
    	}
    </script>
    <body>
     
    <form method="post" action="" name="tcp_test">
    	<input type="hidden" name="action" value="update" />
    	<p>
     
    		<select name="bert" id="bert" onchange="process(this.value, 'zoo')">
    			<option value="">Make a selection</option>
    			<option value="BOB">BOB</option>
    			<option value="">None</option>
    		</select>
    		<input type="text" name="" value="" id="zoo" />
    		<label>Graphical shadow</label>
    	</p>
     
    	<p>
    		<select name="ernie" id="ernie" onchange="process(this.value, 'duh')">
    			<option value="">Make a selection</option>
    			<option value="snuff">snuff</option>
    			<option value="">None</option>
    		</select>
    		<input type="text" name="" value="" id="duh" />
    		<label>Graphical shadow</label>
    	</p>
    </form>
     
    </body>
    </html>
    Spike
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant Thank you very much.

    The trick seemed to be this bit:
    Code:
    process(this.value, 'zoo')">

  4. #4
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Yes. By adding that to the function it adds the capability of targeting the final source.
    You could also have

    Code:
    process('bert', 'zoo')">
    as I gave the select the id as well as the name.
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....


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
  •