title: Javascript - set value of input field equal to value selected from drop down list
body: <p>I have a PHP based form. It has a drop down list which fetches values from the mysql database.</p>
  
  <pre><code>&lt;select name=cat onchange="AjaxFunction(this.value);" style="width=600"&gt; &lt;br&gt;
  &lt;option value='' Select One&lt;/option&gt; 
  &lt;br&gt;
  &lt;? 
    require "config.php";// connection to database  
    $q=mysql_query("select cat_id from categories"); 
    while($n=mysql_fetch_array($q)){ 
      echo "&lt;option value=$n[cat_id]&gt;$n[category]&lt;/option&gt;"; 
    } 
  ?&gt; 
  &lt;/select&gt; 
  </code></pre>
  
  <p>The drop down list works 100%. I then have another text input field,</p>
  
  <pre><code>&lt;input type=text name=copycat&gt;
  </code></pre>
  
  <p>I want the value of the copycat input box to be equal to the selected value of the drop down list and to update in real time.</p>
  
  <p>Can this be done? I should imagine quite easily. I am thinking something like:</p>
  
  <pre><code>&lt;input type=text name=copycat onBlur="document.getElementById('cat').value=this.value;"&gt;
  </code></pre>
  
  <p>Any help would be appreciated.</p>
  
  <p>Thanks and Regards,
  Ryan</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Code to get the javscript sendValue working with value of copycat.</p>
  
  <p>catalin87, please assist with getting sendvalue working, currently, clicking the select button has no response fromthe browser.</p>
  
  <p>Thanks again,
  Ryan</p>
  
  <pre><code>&lt;? 
  
    $con = mysql_connect('localhost', 'username', 'password'); 
   if (!$con) 
     { 
     die('Could not connect to server: ' . mysql_error()); 
     } 
     $db=mysql_select_db("database", $con); 
  
      if (!$db) 
     { 
     die('Could not connect to DB: ' . mysql_error()); 
     } 
  
  
  $sql="select packcode,category,description,grouping,packconfig,sellingunits,eottpoints from skudata order by category, packcode";
  $result=mysql_query($sql);
  
   ?&gt; 
  
  &lt;script type="text/javascript"&gt; 
  
    function AjaxFunction(cat_id) { 
      var httpxml; 
      try { 
        // Firefox, Opera 8.0+, Safari 
        httpxml = new XMLHttpRequest(); 
      } catch (e) { 
        // Internet Explorer 
        try { 
          httpxml = new ActiveXObject("Msxml2.XMLHTTP"); 
        } catch (e) { 
          try { 
            httpxml = new ActiveXObject("Microsoft.XMLHTTP"); 
          } catch (e) { 
            alert("Your browser does not support AJAX!"); 
            return false; 
          } 
        } 
      } 
      function stateck() { 
        if (httpxml.readyState == 4) { 
          var myarray = eval(httpxml.responseText); 
          // Before adding new we must remove previously loaded elements 
          for (j = document.testform.subcat.options.length - 1; j &gt;= 0; j--) { 
            document.testform.subcat.remove(j); 
          } 
          for (i = 0; i &lt; myarray.length; i++) { 
            var optn = document.createElement("OPTION"); 
            optn.text = myarray[i]; 
            optn.value = myarray[i]; 
            document.testform.subcat.options.add(optn); 
          }  
        } 
      } 
      var url="dd.php"; 
      url = url+"?cat_id="+cat_id; 
      url = url+"&amp;sid="+Math.random(); 
      httpxml.onreadystatechange = stateck; 
      httpxml.open("GET",url,true); 
      httpxml.send(null); 
    } 
  
  &lt;/script&gt; 
  
  
  
  
   &lt;script type="text/javascript"&gt; 
  function updateinput(){ 
  var e = document.getElementById("subcat"); 
  var catSelected = e.options[e.selectedIndex].value; 
  
  document.getElementById("copycat").value=catSelected; 
  } 
  &lt;/script&gt; 
  
  
  &lt;script type="text/javascript"&gt; 
  function sendValue(value)
   { 
   value = e.options[e.selectedIndex].value; 
   var parentId = &lt;?php echo json_encode($_GET['id']); ?&gt;; 
   window.opener.updateValue(parentId, value); 
   window.close(); 
   } 
   &lt;/script&gt; 
  
  
  &lt;form name="testform"&gt;
  Category: &amp;nbsp; &lt;select name=cat id=cat onchange="AjaxFunction(this.value);" style="width=600"&gt; &lt;br&gt;
  &lt;option value='' style="width=600"&gt;Select One&lt;/option&gt; 
  &lt;br&gt;
  &lt;? 
  
    require "config.php";// connection to database  
    $q=mysql_query("select * from categories"); 
    while($n=mysql_fetch_array($q)){ 
      echo "&lt;option value=$n[cat_id]&gt;$n[category]&lt;/option&gt;"; 
    } 
  
  ?&gt; 
  &lt;/select&gt; 
   &lt;br&gt;&lt;br&gt;
   Pack Code:
  &lt;select name=subcat onchange="updateinput();" &gt; 
   &lt;br&gt;&lt;br&gt;
  &lt;/select&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;input type=text name=copycat id=copycat &gt; 
  &lt;br&gt;&lt;br&gt;
  &lt;td&gt;&lt;input type=button value="Select" onClick="sendValue(document.getElementById(copycat))" /&gt;&lt;/td&gt;
  &lt;/form&gt; 
  </code></pre>