Option List populating a text box

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
mudvein
Forum Commoner
Posts: 45
Joined: Wed Mar 16, 2005 4:39 pm

Option List populating a text box

Post 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.
Last edited by mudvein on Wed Aug 10, 2005 8:22 am, edited 1 time in total.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
mudvein
Forum Commoner
Posts: 45
Joined: Wed Mar 16, 2005 4:39 pm

Post 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++;
Post Reply