Dynamically fill multiple input fields from MySQL depending on the drop list item selected

Question

I've searched through the site for this but am coming up empty handed. Here is what I am trying to do:

User selects one of a series of options from a drop list
Two input fields change to reflect this selection, filling the input boxes with data pulled from my database

See the image below for a visual representation of what I mean:

I know that I am going to need JavaScript for this solution, but my JS skills are not so hot (and I think I am having a momentary lapse of brain power today)!

Here's the code that I have so far (don't worry about the outdated PHP):

<select name="item" id="item">

<?php
while($row = mysql_fetch_array($result)) {
    $item_id = $row['item_id'];
    $item_category = $row['item_category'];
    $item_title = $row['item_title'];
    $item_price = $row['item_price'];
    $item_description = $row['item_description'];

    echo "<option value=\"".$item_id."\">".$item_title."</option>";
} 
?>

</select>

<script>
function update_txt() {
    price = document.getElementById('item').selectedIndex.value;
    document.getElementById('item_details').value = price;
    document.getElementById('item_price').value = price;
}
</script>

<input id="item_details" type="text" class="validate">
<input id="item_price" type="text" class="validate" value="$">

Any help is greatly appreciated! Let me know if you need any clarification. :)

dave · Accepted Answer · 2015-07-24 22:43:44Z

4

I would json encode the row and store it as a data-attribute on the option, then read the attribute on the selects change event:

<select name="item" id="item">
<?php
    while($row = mysql_fetch_array($result)) {
        $item_id = $row['item_id'];
        $item_title = $row['item_title'];
        echo "<option value=\"".$item_id."\" data-json='" . json_encode($row) . "'>".$item_title."</option>";
    } 
 ?>
</select>
<input id="item_details" type="text" class="validate">
<input id="item_price" type="text" class="validate" value="$">

<script>
    $('#item').on('change', function() {
        var selected = $(this).find('option[value="' + $(this).val() + '"]').data('json');
        $('#item_details').val(selected.item_description);
        $('#item_price').val(selected.item_price);
    });
</script>

answered Jul 24, 2015 at 22:43

dave

65.1k6 gold badges81 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sheldon Scott Over a year ago

Ah, data-attributes! Thanks for this! I hadn't been aware of this ability. That sounds like it will work perfectly. :)

ggna Over a year ago

How should this be modified if $row is obtained via a combination of $result = $conn->query($sql); and $row = $result->fetch_assoc() ? The format of the resulting json differs.

mongjong · Accepted Answer · 2015-07-24 22:46:41Z

1

You can use a combination of PHP, AJAX and JavaScript (or jQuery).

The general idea is as follows:

User selects an option(s)
JavaScript is used to detect the selection and the option(s) selected
AJAX gets the options selected, formats it and passes it to a PHP "page"
PHP does the SQL queries and passes the values back
AJAX gets those values and populates the current page using standard JavaScript methods

There's a good tutorial here which shows how it fits together: http://www.tizag.com/ajaxTutorial/ajax-mysql-database.php. I would use prepared statements instead of the SQL queries shown in this example though.

answered Jul 24, 2015 at 22:46

mongjong

4793 silver badges6 bronze badges

Collectives™ on Stack Overflow

Dynamically fill multiple input fields from MySQL depending on the drop list item selected

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related