Question

I have a PHP based form. It has a drop down list which fetches values from the mysql database.

<select name=cat onchange="AjaxFunction(this.value);" style="width=600"> <br>
<option value='' Select One</option> 
<br>
<? 
  require "config.php";// connection to database  
  $q=mysql_query("select cat_id from categories"); 
  while($n=mysql_fetch_array($q)){ 
    echo "<option value=$n[cat_id]>$n[category]</option>"; 
  } 
?> 
</select> 

The drop down list works 100%. I then have another text input field,

<input type=text name=copycat>

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.

Can this be done? I should imagine quite easily. I am thinking something like:

<input type=text name=copycat onBlur="document.getElementById('cat').value=this.value;">

Any help would be appreciated.

Thanks and Regards,
Ryan

UPDATE

Code to get the javscript sendValue working with value of copycat.

catalin87, please assist with getting sendvalue working, currently, clicking the select button has no response fromthe browser.

Thanks again,
Ryan

<? 

  $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);

 ?> 

<script type="text/javascript"> 

  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 >= 0; j--) { 
          document.testform.subcat.remove(j); 
        } 
        for (i = 0; i < 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+"&sid="+Math.random(); 
    httpxml.onreadystatechange = stateck; 
    httpxml.open("GET",url,true); 
    httpxml.send(null); 
  } 

</script> 




 <script type="text/javascript"> 
function updateinput(){ 
var e = document.getElementById("subcat"); 
var catSelected = e.options[e.selectedIndex].value; 

document.getElementById("copycat").value=catSelected; 
} 
</script> 


<script type="text/javascript"> 
function sendValue(value)
 { 
 value = e.options[e.selectedIndex].value; 
 var parentId = <?php echo json_encode($_GET['id']); ?>; 
 window.opener.updateValue(parentId, value); 
 window.close(); 
 } 
 </script> 


<form name="testform">
Category: &nbsp; <select name=cat id=cat onchange="AjaxFunction(this.value);" style="width=600"> <br>
<option value='' style="width=600">Select One</option> 
<br>
<? 

  require "config.php";// connection to database  
  $q=mysql_query("select * from categories"); 
  while($n=mysql_fetch_array($q)){ 
    echo "<option value=$n[cat_id]>$n[category]</option>"; 
  } 

?> 
</select> 
 <br><br>
 Pack Code:
<select name=subcat onchange="updateinput();" > 
 <br><br>
</select>
<br><br>
<input type=text name=copycat id=copycat > 
<br><br>
<td><input type=button value="Select" onClick="sendValue(document.getElementById(copycat))" /></td>
</form> 

Answer 1

1`st set an id to the select box and to the input, and add an onChange event:

<select name=cat id=cat onchange="updateinput();" style="width=600">
<input type=text name=copycat id=copycat >

Then put this function somewhere:

<script type="text/javascript">
function updateinput(){
var e = document.getElementById("cat");
var catSelected = e.options[e.selectedIndex].text;

document.getElementById("copycat").value=catSelected;
}    
</script>   

This will populate withe the label of the selected item, if u want the value of the selected item use this function:

<script type="text/javascript">
function updateinput(){
var e = document.getElementById("cat");
var catSelected = e.options[e.selectedIndex].value;

document.getElementById("copycat").value=catSelected;
}
</script>   

---

here is your full code:

     <? 

  $con = mysql_connect('localhost', 'username', 'password'); 
 if (!$con) 
   { 
   die('Could not connect to server: ' . mysql_error()); 
   } 
   $db=mysql_select_db("dbname", $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);

 ?> 

<script type="text/javascript"> 

  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 >= 0; j--) { 
          document.testform.subcat.remove(j); 
        } 
        for (i = 0; i < 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+"&sid="+Math.random(); 
    httpxml.onreadystatechange = stateck; 
    httpxml.open("GET",url,true); 
    httpxml.send(null); 
  } 

</script> 


<script type="text/javascript"> 
function sendValue(value) 
{ 
    var parentId = <?php echo json_encode($_GET['id']); ?>; 
   window.opener.updateValue(parentId, value);
    window.close(); 
} 
</script> 

 <script type="text/javascript"> 
function updateinput(){ 
var e = document.getElementById("cat"); 
var catSelected = e.options[e.selectedIndex].value; 

document.getElementById("copycat").value=catSelected; 
} 
</script> 

<form name="testform">
Category: &nbsp; <select name=cat id=cat onchange="updateinput();" style="width=600"> <br>
<option value='' style="width=600">Select One</option> 
<br>
<? 

  require "config.php";// connection to database  
  $q=mysql_query("select * from categories"); 
  while($n=mysql_fetch_array($q)){ 
    echo "<option value=$n[cat_id]>$n[category]</option>"; 
  } 

?> 
</select> 
 <br><br>
 Pack Code:
<select name=subcat > 
 <br><br>
</select>
<br><br>
<input type=text name=copycat id=copycat >
<br><br>
<td><input type=button value="Select" onClick="sendValue('<?php echo $rows['packcode']; ?>')" /></td>
</form> 

I changed:

Put : onchange=”updateinput();”

<select name=cat id=cat onchange="updateinput();" style="width=600">

and

<input type=text name=copycat id=copycat >

remove:

 onBlur="document.getElementById('cat').value=this.value;"