Page 1 of 1

Option List populating a text box

Posted: Tue Aug 09, 2005 3:44 pm
by mudvein
Hey guys, i have a small question. Here is basically what's going on :

Scenario :
I am populating an option select list dynamically from a MySQL Table. This option list will be created multiple times on a page.

(Example :

Code: Select all

<?php
  $sql = "SELECT * from my_site";
  $result = mysql_query($sql) or die(MySQL_Error());
  while($row = mysql_fetch_assoc($result)) {
     $name[] = $row['field_name'];
     $value[] = $row['field_value'];
  }
  $i=0;
  foreach($name as $field_name) {
    if($field_name == 'color') {
       echo '<select name="bob'.$i.'">';
       foreach($value as $hex_color_code) {
         echo '<option value="'.$hex_color_code.'">'.$hex_color_code.'</option>';
       }
       echo '</select> <input type="text" name="bobs_value'.$i.'">'; 
    } else {
       //do some other checks
    }
  }
?>
So i end up with something like this :

Code: Select all

<select name="bob1">
         <option value="#FFFFFF">White</option>
         <option value="#000000">Black</option>
</select> <input type="text" name="bobs_value1">
.......some html

<select name="bob2">
  <option value="#FFFFFF">White</option>
  <option value="#000000">Black</option>
</select> <input type="text" name="bobs_value2">
What needs to happen is when I select a color from the dropdown list, I want it to populate the input text box that is beside it with the Hex Color Code I select.

I kind of understand that this can be done using an OnChange even with javascript, but I have no clue as how to do this without effecting all the other text boxes and their values. Because as you can see, I will have multiple Color Selects within 1 page. So I need to figure out WHICH select box something was selected in, and then tell it the occompaning Text Box to populate the result into. If anyone can shed some light on this, it would be much appreciated.

Posted: Tue Aug 09, 2005 4:04 pm
by feyd
you have a fairly regular naming system, so...

Code: Select all

<select name="bob1" onchange="showValue(this.form,this.name)">

----------


function showValue(frm,str)
{
  var name = str.replace(/[0-9]+$/,'');
  var number = str.replace(/^[^0-9]+/,'');
  var fieldName = name+'s_value'+number;
  var obj = (typeof(frm.elements[fieldName]) != 'undefined' ? frm.elements[fieldName] : null;
  var value = ((typeof(frm.elements[str]) != 'undefined' && frm.elements[str].options) ? frm.elements[str].options[frm.elements[str].selectedIndex].value : '');
  if(obj != null)
  {
    obj.value = value;
  }
}
this code is entirely untested.

Posted: Wed Aug 10, 2005 8:15 am
by mudvein
found the solution. thanks for the suggestion but found an easier one :

Code: Select all

echo '<script language="javascript">
  Function go(id) {
    var a = document.getElementById("bob"+id).value;
    document.getElementById("bob_value"+id).value = a;
  }
</script>';

$i=0;

echo '<select name="bob" id="bob'.$i.'" onchange="go('.$i.')">';

//myforloop and option loop stuff {}

echo '</select><input type="text" name="bob'.$i.'" id="bob_value'.$i.'">';
$i++;