Member Avatar for karin21

hi, i have a script here which display an item name from database into textfield based on the combo box selection, i cn display the item name but my problem is i dont know how to display the item information into the textbox? i'm required to use php but i think it can handle by javascript, hope my simple explanation works n_n

ex. item color
apple red
car blue

<script type="text/javascript" language="javascript">



function populate(oSelect) {

var opt, opt2, a=0, i = 0, textarea = document.getElementById('notes');

while (opt = oSelect.options[i++])

if (opt.selected && textarea.value.indexOf(opt.value) == -1)

textarea.value += opt.value + '\n';



return true;

}


</script>



<body>


<?php

$db_host = 'localhost';
$db_user = 'root';
$db_pass = '';
$db_db = 'dbname';

$db_link = mysql_connect($db_host, $db_user, $db_pass) or die('MySQL Connection Error:'.mysql_error());
mysql_select_db($db_db) or die('MySQL Error: Cannot select table');



$sql = "SELECT id,item,colorinfo FROM table ORDER by id";
$result = mysql_query($sql);



echo "<form name=f1 method=post action='' onSubmit='return false;'>";
echo "<select name=m1 size='8' onDblClick='populate(this)'>";
while ($row=mysql_fetch_assoc($result)) {
$id=$row['id'];
$display_name=$row['item'];
$display_color=$row['color'];
echo "<option value='$display_name'>$display_name</option>";

}


echo "</select>";
echo "<br>";

echo "<th>Color:<input type='text' name='color' id='color'>";
echo "</form>";
echo "</td>";
echo "<td valign='top' align='left'>";
echo "<form name=f2 method=post action='' onSubmit='return false;' >";
echo "<p align='left'>";


echo "</form>";

?>

</table>
<form>
<TEXTAREA class=formfield2 name="notes" id="notes" rows=12 cols=16 wrap="virtual"></TEXTAREA>
<input type="button" value="clear" onClick="if (confirm('Clear the field?'))notes.value='',">
</form>
</body>
</html>
  • 4 Contributors
  • 5 Replies
  • 2K Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by karin21

Dani AI

Generated

You are close, . Two small changes will make this work cleanly. First, fix the column name mismatch that @spthorn spotted: use the actual field name from your SELECT (e.g., colorinfo). Second, do not put presentation data (like the color) in the option value. Use the option value for the database id, and carry any extra fields in data-* attributes. Then a single change handler can fill your textbox and textarea without extra queries.

<?php
// PDO avoids the old mysql_* API.
$pdo = new PDO('mysql:host=localhost;dbname=dbname;charset=utf8mb4','root','',[
  PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
]);

$stmt = $pdo->query('SELECT id, item, colorinfo FROM `table` ORDER BY id');
?>
<select id="m1">
  <?php foreach ($stmt as $row): ?>
    <option
      value="<?php echo (int)$row['id']; ?>"
      data-color="<?php echo htmlspecialchars($row['colorinfo'], ENT_QUOTES); ?>">
      <?php echo htmlspecialchars($row['item'], ENT_QUOTES); ?>
    </option>
  <?php endforeach; ?>
</select>

<input type="text" id="color">
<textarea id="notes"></textarea>

<script>
  const sel = document.getElementById('m1');
  const color = document.getElementById('color');
  const notes = document.getElementById('notes');

  sel.addEventListener('change', function () {
    const opt = sel.options[sel.selectedIndex];
    const itemName = opt.text;
    const itemColor = opt.dataset.color || '';
    color.value = itemColor;
    notes.value = itemName + ' ' + itemColor;
  });

  // initialize on first load
  sel.dispatchEvent(new Event('change'));
</script>

If your dropdown is large or the item details are heavy, follow @diafol’s idea and fetch by id via AJAX: send the selected id to a small PHP endpoint that returns JSON, then populate the fields with fetch. Also note: the legacy mysql_* functions are long removed; prefer PDO or mysqli, and always escape output with htmlspecialchars to prevent XSS.

Recommended Answers

All 5 Replies

Member Avatar for kvprajapati

Your thread is belongs to PHP forum.

Member Avatar for karin21

i think this is a PHP forum

Member Avatar for Member #120589

You will definitely need a server-side language to get info from a database. pHp with MySQL is great. If you have a dropdown (select) you can use AJAX to retrieve info into a textarea.

I suggest that you use something like the Prototype library to deal with the ajax implementation.

1. Download this from http://www.prototypejs.org (currently version 1.6).
2. Place this file into a folder, e.g. "/js/"
3. Create a new js file, e.g. and place it in the same folder.
4. Link the two js files to the php file's head area.
5. Create the form select widget via php or use static html.

e.g. for php:

<select name="m1" id="m1" onchange="popMe();return false">
<?php
$q = "SELECT * FROM table...";
$r = mysql_query($q);
while($d = mysql_fetch_array($r)){
   output .= "\n\t<option id=\"{d['id']}\">{$d['type']}</option>";
}
echo $output;
?>
</select>

...

<textarea name="notes" id="notes"></textarea>

6. Write the popMe() function in your file:

function popMe(){
  var op = $F('m1');
  var url = "/includes/getrecs.php";
  var param = "id=" + op;
  var oGetInfo = new Ajax.Updater("notes", url,{method: 'post',parameters: param});
}

7. Write the php code for getting the data and call the file getrecs.php.

...DB connection details...

$id = $_POST['id'];
$q = "SELECT info FROM table WHERE id='{$id}'";
$r = mysql_query($r);
$d = mysql_fetch_array($r);
$info = stripslashes($d['info']);
echo $info;

That's it. I haven't checked the code, it's off the top of my head, so there may be typos or something, but it's pretty close.

Member Avatar for Member #203197

Karin,

I see a couple problems.

First, you're not accessing the right column name for the color. The SELECT statement says it's 'colorinfo', but when you access it, it's as 'color'. Change the assignment line to: $display_color=$row['colorinfo']; and the following line to echo "<option value='$display_color'>$display_name</option>"; In that JavaScript function, use the following line to get both the color and name into the textarea: textarea.value += opt.innerHTML + ' ' + opt.value + '\n'; -steve

Member Avatar for karin21

ok mr.ardav and mr.steve thanks for the help i will try your solutions at home

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.