Autofill <select> from MySQL and auto-populate <input> fields

Question

I am retrieving a list of items from a MySQL DB and populating a <select> field on the form. When an option value is selected, the array will then be placed in the <input> boxes beside automagically. This all works fine for the first one, but the issue is that the second, third, forth entries and so on, don't auto populate.

I don't know jQuery and have been relying on examples I find on this website to build this.

<?php
include('../includes/main.php');
include_once('../includes/config.php');

//// Get data from database

$sql = "SELECT item, description, price from pricelist ";
$result = mysqli_query($con, $sql);
$dataSource = array();

while($row = mysqli_fetch_assoc($result))
{
     $dataSource[] = $row;
}

    $dataSourceInJson = json_encode($dataSource);

?>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $( document ).ready(function() {
            var dataSource = '<?php echo $dataSourceInJson; ?>';

            $( "#items").click(function() {
                var itemSelected = $(this).val();

                $.each(JSON.parse(dataSource), function( index, value ) {
                    var itemType = value.item;

                    if(itemSelected == itemType){
                        // Extract related Craft values from JSON object
                        var description = value.description;
                        var price = value.price;

                        // Place craft value in respective INPUT box
                        $('#description').val(description);
                        $('#price').val(price);
                    }

                });
            });
        });
    </script>
</head>
<body>
    <!-- First entry -->
    <p><select id='items' name="items[]">
        <option value="">Select a Service</option>
        <?php
            foreach ($dataSource as $key => $value)
            {
                echo "<option value='$value[item]'>$value[item]</option>";
            }
        ?>
    </select></p>

    <p>Description:     <input type="text" id="description" name="description[]" value=""></p>
    <p>Price: <input type="text" id="price" name="price[]" value=""></p>
    
    
    <!-- Second entry -->
    <p><select id='items' name="items[]">
        <option value="">Select a Service</option>
        <?php
            foreach ($dataSource as $key => $value)
            {
                echo "<option value='$value[item]'>$value[item]</option>";
            }
        ?>
    </select></p>
    <p>Description:     <input type="text" id="description" name="description[]" value=""></p>
    <p>Price: <input type="text" id="price" name="price[]" value=""></p>   
    
    
    <!-- Third entry -->
    <p><select id='items' name="items[]">
        <option value="">Select a Service</option>
        <?php
            foreach ($dataSource as $key => $value)
            {
                echo "<option value='$value[item]'>$value[item]</option>";
            }
        ?>
    </select></p>
    <p>Description:     <input type="text" id="description" name="description[]" value=""></p>
    <p>Price: <input type="text" id="price" name="price[]" value=""></p>      
    
    
</body>
</html>

Ryan Wilson · Accepted Answer · 2020-07-15 20:15:24Z

1

You are using the same id for all of your input boxes. id is a unique property, you should be using different ids on each of your inputs. Add a common class to your drop downs and change your event handler to the class of your select elements. Then change your setting of the description and price inputs using jquery functions .closest and .next and .find, like so:

Change each of your select's like so:

<p><select class='nameItems' name="items[]">

Change each of your inputs like so:

<p>Description:<input type="text" class="description" name="description[]" value=""></p>
<p>Price: <input type="text" class="price" name="price[]" value=""></p>

Then in your script, change to this:

$( ".nameItems").click(function() {
            const itemSelected = $(this).val();
            const $selectedElement = $(this); //Store a reference to the select element

            $.each(JSON.parse(dataSource), function( index, value ) {
                var itemType = value.item;

                if(itemSelected == itemType){
                    // Extract related Craft values from JSON object
                    var description = value.description;
                    var price = value.price;

                    // Place craft value in respective INPUT box
                    $selectedElement.closest('p').next('p').find('input').val(description);
                    $selectedElement.closest('p').next('p').next('p').find('input').val(price);
                }

            });
        });

edited Jul 15, 2020 at 20:15

answered Jul 14, 2020 at 13:25

Ryan Wilson

10.9k3 gold badges23 silver badges46 bronze badges

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

2 Comments

Ronaldo Over a year ago

Thank you very much for taking the time to help me out Ryan. I made the recommended changes and now none of the boxes are auto-populating, but I still get my selection from the DB. Any ideas?

Ronaldo Over a year ago

I got. forgot to include $( document ).ready(function() { var dataSource = '<?php echo $dataSourceInJson; ?> Thank you very much for your help. Much appreciated. Cheers

Collectives™ on Stack Overflow

Autofill <select> from MySQL and auto-populate <input> fields

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related