www.webdeveloper.com
Results 1 to 3 of 3

Thread: I can populating a text field from drop down. Help make it populating two text fields

  1. #1
    Join Date
    Apr 2007
    Posts
    26

    I can populating a text field from drop down. Help make it populating two text fields

    Here are a simple script, for populating a text field from drop down,
    for example how it works : user clicking on option 1, then the textfield showValue1 will filled/fired with 1a



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled</title>
    </head>
    <body>
    <form name="theform" onsubmit="CheckForm()">
    <select name="myOptions" onchange="document.theform.showValue1.value=this.value">
    <option value="">Please select an option</option>
    <option value="1a">1</option>
    <option value="2a">2</option>
    <option value="3a">3</option>
    <option value="4a">4</option>
    </select>
    <input type="text" name="showValue1"><br>
    </form>
    </body>
    </html>





    now i need two to insert two value, in two text field together, when user choosing an option
    for example : user clicking on option 1, then the textfield showValue1 will filled/fired with 1a,
    and the the second textfield, lets say showValue2 will filled/fired with lets say 1b




    i already tried added below in red, but its still not working

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled</title>
    </head>
    <body>
    <form name="theform" onsubmit="CheckForm()">
    <select name="myOptions" onchange="document.theform.showValue1.value=this.value &amp; document.theform.showValue2.value2=this.value2">
    <option value="">Please select an option</option>
    <option value="1a" &amp; value2="1b">1</option>
    <option value="2a" &amp; value2="2b">2</option>
    <option value="3a" &amp; value2="3b">3</option>
    <option value="4a" &amp; value2="4b">4</option>
    </select>
    <input type="text" name="showValue"><input type="text" name="showValue2"><br>
    </form>
    </body>
    </html>




    please share your knowledge, how is the right code?
    ME me me

  2. #2
    Join Date
    Mar 2011
    Posts
    1,145
    Code:
    <select name="myOptions" onchange="document.theform.showValue1.value=this.value; document.theform.showValue2.value=this.value">
    will also display the value from the <select> list in the second input text box. Are you sure that's what you want to do?
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,467
    Hi there basketmen,

    try it like this...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title></title>
    
    <style type="text/css">
    body {
        background-color:#f0f0f0;
     }
    #theform {
        float:left;
        padding:20px;
        border:1px solid #999;
        background-color:#fff;
        box-shadow:#666 2px 2px 8px;
    }
    #theform div {
        margin:5px 0;
     }
    </style>
    
    <script type="text/javascript">
    
    function init(){
    
       df=document.forms[0];
    
    df[0].onchange=function(){
    if(this.value!='') {
    
    /* this will work regardless of the amount of space between values */
    
       df[1].value=this.value.split(/\s+/)[0];
       df[2].value=this.value.split(/\s+/)[1];
    
    /*******************************************************************/
      }
     }
    
    df.onsubmit=function(){
       return CheckForm();
      }
     }
    function CheckForm(){
    
     }
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    </script>
    
    </head>
    <body>
    
    
    <form id="theform" action="#">
    <div>
    <select name="myOptions">
     <option value="">Please select an option</option>
     <option value="1a 1b">1</option>
     <option value="2a  2b">2</option>
     <option value="3a   3b">3</option>
     <option value="4a    4b">4</option>
    </select>
    </div><div>
     <input type="text" name="showValue">
    </div><div>
     <input type="text" name="showValue2">
    </div><div>
     <input type="submit"> 
     <input type="reset">
    </div>
    </form>
    
    </body>
    </html>
    
    coothead

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles