www.webdeveloper.com
Page 1 of 3 123 LastLast
Results 1 to 15 of 33

Thread: Dynamically populate text box through drop down box

  1. #1
    Join Date
    Dec 2003
    Location
    India
    Posts
    2

    Dynamically populate text box through drop down box

    i want to populate text box on selection of an option from drop down box



    as user select an option from drop down box the text box should be populated with that same option text automatically

    is it possible to do it in java script or php
    drop down box is populated with a "Journal" dababase table
    and in option value i m passing its id.
    if its possible to pass only id to the text box using java script or php.

    i will manage rest of the things.


    please help me


    thanks in advance.

    Bhoomika

  2. #2
    Join Date
    Nov 2003
    Location
    Aachen, Germany
    Posts
    4,090
    Hi!

    Just a simple example:
    Code:
    <!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.showValue.value=this.value">
    <option value="">Please select an option</option>
    <option value="I am the first option">I am the first option</option>
    <option value="I am the second option">I am the second option</option>
    <option value="I am the third option">I am the third option</option>
    <option value="I am the forth option">I am the fourth option</option>
    </select>
    <input type="text" name="showValue"><br>
    </form>
    </body>
    </html>
    By the way: doing that with PHP would mean to send data back to the server, having to be dealt with on the server and then send the populated form to the client. I don't think, that is very practical...

    Cheers - Pit

  3. #3
    Join Date
    Feb 2009
    Posts
    34

    Dynamically populate text box through drop down box

    Hi Pitmann
    Is it possible to send me the code for the dropdown menu to populate more than one or two textbox fields.

    I have 10 stores and I want the user to select a store.
    Then the Textfield must be filled with the selected store's details

    Hope you can help me

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,389

    Lightbulb Something to think about ...

    Alternative method ...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled</title>
    <script type="text/javascript">
    var StoreDetails = [
      ['Please select an option',''],
      ['Store 1','Store 1 Details'],
      ['Store 2','Store 2 Details'],
      ['Store 3','Store 3 Details'],
      ['Store 4','Store 4 Details'],
      ['Store 5','Store 5 Details'],
      ['Store 6','Store 6 Details'],
      ['Store 7','Store 7 Details'],
      ['Store 8','Store 8 Details'],
      ['Store 9','Store 9 Details'],
      ['Store 10','Store 10 Details']  // Note: no comma at end of last entry
    ];
    function Setup(TA) {
      var str = "<select onchange=\"StoreInfo('"+TA+"')\">";
      for (var i=0; i<StoreDetails.length; i++) {
        str += '<option value="'+StoreDetails[i][1]+'">'+StoreDetails[i][0]+'</option>';
      }
      str +='</select>';
      str +='<input id="Store'+TA+'" type="text"><br>';
      document.write(str);
    
    }
    function StoreInfo(TA) {
      var IDS = 'Store'+TA;
    	alert(IDS+'\n'+(Number(TA)))
      document.getElementById(IDS).value = StoreDetails[TA][1];
    }
    </script>
    </head>
    <body>
    <form name="theform" onsubmit="CheckForm()">
    <script type="text/javascript">
    Setup('1');
    Setup('2');
    Setup('3');
    Setup('4');
    Setup('5');
    Setup('6');
    Setup('7');
    Setup('8');
    Setup('9');
    Setup('10');
    </script>
    </form>
    </body>
    </html>

  5. #5
    Join Date
    Feb 2009
    Posts
    34
    Hi JRKER
    Thank you for the response, I checked it out and it is almost right.
    What I want is 1 Dropdown for all the stores and 5 text boxes for this one dropdown.
    So when the user selects a store it fill the 8 text boxes with that stores details.
    It must also clear the text boxes and fill it with new store info if the user select a different store from the drop down.
    So I think It must contain something like

    function Clear_Form() {
    document.form1.txtName.value="";
    document.form1.txtAddress1.value="";
    document.form1.txtAddress2.value="";
    document.form1.txtAddress3.value="";
    document.form1.txtTel.value="";
    document.form1.txtFax.value="";
    document.form1.txtEmail.value="";
    document.form1.txtWebpage.value="";
    }

    I hope this makes sense
    Thanks

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,389

    Question Clarification please ...

    I hope this makes sense
    Nope ...
    1 Dropdown
    ... controls 5 text boxes (???)
    ... fills 8 textboxes (assume txtName thru txtWebpage)

    Clear and fill with different information, OK, but the above doesn't add up to me.

  7. #7
    Join Date
    Feb 2009
    Posts
    34
    Sorry
    Ignore the clear function
    1 Drop down with 8 text boxes
    When user selects a new store it must fill the text boxes with new array of that selected stores details. ie. Address1, Address2, Address3, Tel, Fax, Email, Webpage etc.
    Hope this is more clear

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,389

    Lightbulb

    Try this variation ...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled</title>
    <script type="text/javascript">
    
    // Format of StoreDetails()
    // Name,Addr1,Addr2,Addr3,Phone,FAX,Email,Webpage
    var StoreDetails = [
      ['Please select an option','','','','','','','',''],
      ['Store 1','Name 1','Addr 1','Addr 1','Addr 1','Phone 1','FAX 1','Email 1','Webpage 1'],
      ['Store 2','Name 2','Addr 2','Addr 2','Addr 2','Phone 2','FAX 2','Email 2','Webpage 2'],
      ['Store 3','Name 3','Addr 3','Addr 3','Addr 3','Phone 3','FAX 3','Email 3','Webpage 3'],
      ['Store 4','Name 4','Addr 4','Addr 4','Addr 4','Phone 4','FAX 4','Email 4','Webpage 4'],
      ['Store 5','Name 5','Addr 5','Addr 5','Addr 5','Phone 5','FAX 5','Email 5','Webpage 5'] // Note: no comma
    ];
    function Setup(TA) {
      var str = "<select id='Store' onchange='StoreInfo()'>";
      for (var i=0; i<StoreDetails.length; i++) {
        str += '<option value="'+StoreDetails[i].join('|')+'">'+StoreDetails[i][0]+'</option>';
      }
      str +='</select>';
      document.write(str);
    
    }
    function StoreInfo() {
      var sel = document.getElementById('Store').selectedIndex;
      var tmp = [];  tmp.push(sel);
      for (var i=1; i<9; i++) { tmp.push(StoreDetails[sel][i]); }
      document.getElementById('txtName').value = tmp[1];
      document.getElementById('txtAddr1').value = tmp[2];
      document.getElementById('txtAddr2').value = tmp[3];
      document.getElementById('txtAddr3').value = tmp[4];
      document.getElementById('txtPhone').value = tmp[5];
      document.getElementById('txtFAX').value = tmp[6];
      document.getElementById('txtEmail').value = tmp[7];
      document.getElementById('txtWebpage').value = tmp[8];
    }
    </script>
    </head>
    <body>
    <form name="theform" onsubmit="CheckForm()">
    <script type="text/javascript">Setup();</script>
    <table border="0">
    <tr><td>Name:</td><td><input type="text" id="txtName" size="30" value=""></td></tr>
    <tr><td>Address 1:</td><td><input type="text" id="txtAddr1" size="30" value=""></td></tr>
    <tr><td>Address 2:</td><td><input type="text" id="txtAddr2" size="30" value=""></td></tr>
    <tr><td>Address 3:</td><td><input type="text" id="txtAddr3" size="30" value=""></td></tr>
    <tr><td>Phone:</td><td><input type="text" id="txtPhone" size="30" value=""></td></tr>
    <tr><td>FAX:</td><td><input type="text" id="txtFAX" size="30" value=""></td></tr>
    <tr><td>Email:</td><td><input type="text" id="txtEmail" size="30" value=""></td></tr>
    <tr><td>Webpage:</td><td><input type="text" id="txtWebpage" size="30" value=""></td></tr>
    </table>
    </form>
    </body>
    </html>

  9. #9
    Join Date
    Feb 2009
    Posts
    34
    Fantastic JMKER
    It is exactly what I was looking for, If I get stuck with anything I will let you know
    Thank you so much.

  10. #10
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,389
    You're most welcome.
    Glad I was able to help after I could understand the problem.
    Good Luck!

  11. #11
    Join Date
    Feb 2009
    Posts
    34
    JMRKER Your code Rock
    It is really easy to understand and straight forward
    I like coding like yours
    Thanks again

  12. #12
    Join Date
    Mar 2009
    Posts
    6
    This looks like something I'm currently working on. The twist on my issue is that I want to include PHP. Some information:
    1. I have a database with a "customers" table
    2. I'm using AJAX to "suggest" (a la Google) a name being entered in a textbox
    3. If a match is found, and the name is clicked, the data should automatically be entered in the remaining textboxes (currently it's only working for the name field)

    Here's what I have:

    HTML Code:
    <table id="txtHint" cellpadding="0" cellspacing="0"></table>
    
    <h1>Add new Work Order</h1>
    <form name="addwo" action="<?php echo $SCRIPT_NAME ?>" method="post">
    
    <table>
    	<tr>
    		<td>Name</td>
    		<td><input type="text" name="txtClient" onkeyup="showHint(this.value)" onfocus="style.background='#99CCCC'" onblur="style.background='#FFFFFF'" /></td>
    	</tr>
    	<tr>
    		<td>Address</td>
    		<td><input type="text" name="address" onfocus="style.background='#99CCCC'" onblur="style.background='#FFFFFF'" /></td>
    	</tr>
    And the javascript:

    Code:
    var xmlHttp
    
    function showHint(str)
    {
    if (str.length==0)
      { 
      document.getElementById("txtHint").innerHTML="";
      return;
      }
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null)
      {
      alert ("Your browser does not support AJAX!");
      return;
      } 
    var url="gethint.php";
    url=url+"?q="+str;
    url=url+"&sid="+Math.random();
    xmlHttp.onreadystatechange=stateChanged;
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
    } 
    
    function stateChanged() 
    { 
    if (xmlHttp.readyState==4)
    { 
    document.getElementById("txtHint").style.visibility="visible";
    document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
    }
    }
    
    function closeMe()
    {
    document.getElementById('txtHint').style.visibility='hidden';
    }
    
    function GetXmlHttpObject()
    {
    var xmlHttp=null;
    try
      {
      // Firefox, Opera 8.0+, Safari
      xmlHttp=new XMLHttpRequest();
      }
    catch (e)
      {
      // Internet Explorer
      try
        {
        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
      catch (e)
        {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      }
    return xmlHttp;
    }
    And the PHP:

    PHP Code:
    <?php

    require("config.php");

    $db mysql_connect($dbhost$dbuser$dbpassword);
    mysql_select_db($dbdatabase$db);

    header("Cache-Control: no-cache, must-revalidate");
    header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

    $q $_GET["q"];
    $sql "SELECT * FROM customers WHERE name LIKE '".$q."%' ORDER BY name ASC LIMIT 10;";
    $res mysql_query($sql);
    $row mysql_num_rows($res);

    if(
    $row == 0) {
        echo 
    "<tr><td>No matches</td></tr>";
    } else {
        while(
    $a mysql_fetch_array($res)) {
            echo 
    "<tr class='normal' onMouseOver=\"this.className='highlight'\" onMouseOut=\"this.className='normal'\" onClick='addwo.txtClient.value=\"".$a['name']."\";closeMe();'><td>".$a['name']."</td></tr>";
        }
    }
        echo 
    "<tr><td class='close'><span onClick='closeMe();'>close</span></td></tr>";
    ?>
    The HTML above is obviously not the whole file but I hope it's enough to give you a good picture of what the rest of the form may look like. I'd like to be able to pass the $a['address'] string from the PHP into the HTML file and set it as the value of the "address" textbox but am quickly finding that it's not very easy to do.

    Suggestions?

  13. #13
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,389

    Exclamation

    I, personally, don't know enough about PHP to help.
    I don't have access to the language on my server.

    Suggestion ... Might try postiing to PHP forum as a new thread
    carrying over the JS that you believe you can use to solve your problem.
    Come back if a JS problem rears its' ugly head...

  14. #14
    Join Date
    Mar 2009
    Posts
    6
    Thanks for the quick response. I've taken your advise and posted in the PHP forum (http://www.webdeveloper.com/forum/sh...732#post985732).

    I just noticed that what I do have (make hidden table with suggested names visible onkeydown) works only in FF and not IE, any idea why?

    -chuck

  15. #15
    Join Date
    Feb 2009
    Posts
    34
    Hi JMRKER
    Remeber that code you gave me for the diffirent stores Below is it but I've added the sum calculation of two text field you helped someone on another thread.
    The problem is that whrn I select the dropdown boxes it does not actually calculate the values . I'm just thinking now that it probably needs a focus of some sort. Can you fix this for me please

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>


    <script type="text/javascript">

    ////////////////////////////////////////////////////////////////////////////////////////
    // Cities
    ////////////////////////////////////////////////////////////////////////////////////////
    // Name,Line1,Line2,Line3,Line4,Line5,Dell,Tel,FAX,FaxEmail,Email,Webpage
    var CityCourierCost = [
    ['Please select your City',''],
    ['Cape Town','200'],
    ['JHB','600']
    //['Witbank','amount']
    ];
    function SetupCity(TA) {
    var str = "<select id='City' onchange='CityInfo()'>";
    for (var i=0; i<CityCourierCost.length; i++) {
    str += '<option value="'+CityCourierCost[i].join('|')+'">'+CityCourierCost[i][0]+'</option>';
    }
    str +='</select>';
    document.write(str);
    }

    function CityInfo() {
    var sel = document.getElementById('City').selectedIndex;
    var tmp = []; tmp.push(sel);
    for (var i=1; i<2; i++) { tmp.push(CityCourierCost[sel][i]); }
    document.getElementById('CourierCost').value = tmp[1];

    }

    ////////////////////////////////////////////////////////////////////////////////////////
    // Products
    ////////////////////////////////////////////////////////////////////////////////////////

    var ProductItemCost = [
    ['Please select your Product',''],
    ['Alpine','1200'],
    ['Surento','800']
    //['Witbank','amount']
    ];
    function SetupProduct(TA) {
    var str = "<select id='Product' onchange='ProductInfo()'>";
    for (var i=0; i<ProductItemCost.length; i++) {
    str += '<option value="'+ProductItemCost[i].join('|')+'">'+ProductItemCost[i][0]+'</option>';
    }
    str +='</select>';
    document.write(str);
    }

    function ProductInfo() {
    var sel = document.getElementById('Product').selectedIndex;
    var tmp = []; tmp.push(sel);
    for (var i=1; i<2; i++) { tmp.push(ProductItemCost[sel][i]); }
    document.getElementById('ProductCost').value = tmp[1];

    }

    ////////////////////////////////////////////////////////////////////////////////////////
    // Calculation
    ////////////////////////////////////////////////////////////////////////////////////////


    function calc(A,B,SUM) {
    var one = Number(A);
    if (isNaN(one)) { alert('Invalid entry: '+A); one=0; }
    var two = Number(document.getElementById(B).value);
    if (isNaN(two)) { alert('Invalid entry: '+B); two=0; }
    document.getElementById(SUM).value = one + two;
    }


    </script>


    </head>

    <body>
    <form name="theform" action="" method=post>
    <table width="651" height="105">
    <tr>
    <td width="101" height="24">City</td>
    <td width="207"><script type="text/javascript">SetupCity();</script></td>
    <td width="51">Amount</td>
    <td width="272"><input type="text" name="City" id="CourierCost" size="40" value="" onChange="calc(this.value,'CourierCost','result')"></td>
    </tr>
    <tr>
    <td height="21">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td height="24">Product</td>
    <td><script type="text/javascript">SetupProduct();</script></td>
    <td>Amount</td>
    <td><input type="text" name="ProductCost" id="ProductCost" size="40" value="" onChange="calc(this.value,'ProductCost','result')"></td>
    </tr>
    <tr>
    <td height="24">&nbsp;</td>
    <td><input name="sum" value="" id="result" readonly style="border:0px;"></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    </form>
    </body>
    </html>

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