Populate HTML Select Field with JSON data queried from MySQL Database with jQuery and PHP

Question

I'm trying to Populate Database Values to an HTML Dropdown Select Field with jQuery. I found a pretty good example I think if this is the way to go. I'm pretty new to jQuery and JavaScript.

Basically, I'm trying the same as the guy here: https://www.electrictoolbox.com/json-data-jquery-php-mysql/ but it is different though.

To keep it on this example, I just need the "Variety" Dropdown, no "Fruit" dropdown. I want to SELECT savename FROM pdfform; on page load and display the results in the "Lade Datensatz" HTML Dropdown.

But all that is Happening is that I get an empty Dropdown like the jQuery isn't executing at all. If I call the data.php directly I get JSON Data:

index.html including JavaScript jQuery:

<!doctype html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body class="bg-light" data-spy="scroll" data-target=".navbar" data-offset="50">
    <div class="container">
        <div class="row">
            <div class="col-md-12 mb-3">
                <form id="LoadForm" name="LoadForm">
                    <h5 class="text-center">Lade Datensatz</h5>
                    <label for="load"></label>
                    <select class="custom-select d-block w-100" id="load" name="load">
                    </select>
                </form>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <script>
        // 1st Try
        // function populatedata() {
        // console.log("populatedata Executed!");
        //     $.getJSON('/data.php',
        //         function(data) {
        //             var select = $('#load');
        //             var options = select.prop('options');
        //             $('option', select).remove();
        //             $.each(data, function(index, array) {
        //                 options[options.length] = new Option(array['savename']);
        //             });
        //         });
        // }

        // 2nd Try
        // function populatedata() {
        //     console.log("populatedata Executed!");
        //     $.getJSON('/data.php',
        //         function(data) {
        //             console.log(data);
        //         });
        // }

        // 3rd Try
        function populatedata() {
            console.log("populatedata Executed!");
            $.getJSON('/data.php');
        }

        // Good for all Trys
        $(document).ready(function() {
            populatedata();
            $('#load').change(function() {
                populatedata();
            });
            $('#load').click(function() {
                populatedata();
            });
        });
    </script>
</body>

</html>

My data.php:

<?php
    header('Content-Type: text/html; charset=utf-8');
    $dsn = "mysql:host=192.168.17.61;dbname=mvt_test";
    $username = "mvt_test";
    $password = "wqiM7n4POSW1jpJLPM3u2";

    $pdo = new PDO($dsn, $username, $password);

    $rows = array();

    $stmt = $pdo->prepare("SELECT savename FROM pdfform");
    // $stmt = $pdo->prepare("SELECT savename FROM pdfform WHERE name = ? ORDER BY savename");
    // $stmt->execute(array($_GET['savename']));
    $stmt->execute();
    $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

    echo json_encode($rows);
?>

Console Log: Picture

First of all, I think you misunderstood the line $stmt->execute(array($_GET['savename'])); in your PHP file. Since you don't have parameters in your sql request (the ? in the electrictoolbox example), your line should be $stmt->execute(); — abvlle
– abvlle, Commented Mar 20, 2019 at 11:05

abvlle · Accepted Answer · 2019-03-20 13:06:13Z

1

I did not pay attention to the jquery you called until you edited your post and add the console log, you're calling the Slim version of jquery which excludes ajax. Check this : JQuery issue "TypeError: $.getJSON is not a function"

You should take a closer look to your console, the error is very clear : $.getJSON is not a function, you have to call the full version of jquery!

answered Mar 20, 2019 at 13:06

abvlle

1382 silver badges10 bronze badges

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

1 Comment

Hige Mynx Over a year ago

Thank you very much, this actually was the biggest Problem. It is Working now with a little further tweaking. Next stop: Loading all the HTML Fields with the Selected Dataset from Database.

Collectives™ on Stack Overflow

Populate HTML Select Field with JSON data queried from MySQL Database with jQuery and PHP

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related