Fill selectbox on current site using AJAX and JSON

Question

I don't have a lot of experience with Javascript and Ajax or JSON for that matter but I'm currently building an HTML lookup tool for a simple PostgreSQL database and I'm a little stuck here. I want to fill the selectbox on the right with corresponding form names from our database whenever the user selects the study in the left selectbox However, I have problems to process the array that I get back from the PHP script.

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery/3.2.1.min.js"</script>
<script>
function getselect(value) {
    $.ajax(
        {
            type: "GET",
            url: 'getforms.php',
            data: {value: value},
            dataType: "json",
            success: fillbox 
        });
}

function fillbox(data) {
                var forms = $('#forms');
                var arr = $.parseJSON(data);
                for (var x = 0; x < arr.length; x++) {
                    forms.append(new Option(arr[x]));
                }
            }
</script>
</head>
<body>

[...]

<?php
$snames = $conn->prepare("SELECT DISTINCT studienname FROM public.fulldict");
$snames->execute();
$a=$snames->fetchAll(PDO::FETCH_COLUMN, 0);
?>

<table border="0">
    <tr>
        <th>Studien:</th>
        <th>Formulare:</th>
    </tr>
    <tr>
        <td>
            <select id="study" name="Studien" size="12" onchange="getselect(this.value);">
                <?php foreach($a as $option) { ?>
                    <option value="<?php echo $option ?>"> <?php echo $option ?> </option>
                <?php }?>
            </select>
        </td>
        <td> 
        <select id="forms"></select>
        </td>
    </tr>
</table>
?>
</body>
</html>

The getforms.php is intended to handle the SQL-query and send an array of values from the database back to Javascript, where the 'fillbox' function is supposed to fill the select box with the values from the array.

<?php
$f = $_GET['value'];
// Connect to Database
require_once 'dbconfig.php'; 
$dsn = "pgsql:host=$host;port=5432;dbname=$db;user=$username;password=$password";
$conn = new PDO($dsn);

// Get array with form names
$form_arr=array();
$fnames = $conn->prepare("SELECT DISTINCT formular FROM public.fulldict WHERE studienname = '$f'");
$fnames->execute();
$form_arr=$fnames->fetchAll(PDO::FETCH_COLUMN, 0);
echo json_encode($form_arr);
?>

When I run the code and select anything from the first selectbox nothing happens. Am I doing something wrong accessing the second selectbox?

Any help is appreciated.

You're also passing the value as 'get_param' but trying to access it with `$_GET['obj']`. You need to change one of those to match the other. — Patrick Q, Aug 08 '17 at 13:08
So, do I then just change the 'get_param' in the data specifier to 'get'? Or could I just lose the get_param completely and write 'data: {obj}' instead? — Basti, Aug 08 '17 at 13:24
You use terms that don't match the things you're talking about. This is misleading (to me), probably to you too. Like obj isn't an object, it's a value ( a string, I guess). Try to not do this. ... and it's $.ajax({url: 'getforms.php', data: {obj: obj}, dataType: "json", success: fillbox}) — Emmanuel Delay, Aug 08 '17 at 14:14
You need to set a header on PHP saying that the content is JSON: `header('Content-Type: application/json');`. If not set, javascript will see only a string. see https://stackoverflow.com/questions/4064444/returning-json-from-a-php-script — Maxwell s.c, Aug 09 '17 at 12:10

score 0 · Accepted Answer · answered Aug 09 '17 at 12:38

Thanks guys, I got it to work. After addiing the JSON header in the PHP file. I had to change the fillbox function to

function fillbox(data) {
var options = '';
for (var x = 0; x < data.length; x++) {
    options += '<option value="' + data[x] + '">' + data[x] + '</option>';
}
$('#forms').html(options);}

Still don't quite understand why the '.append(new Option())' stuff didn't work though?

Fill selectbox on current site using AJAX and JSON

1 Answers1