MySQL Query with PHP and Send Data to JavaScript

Question

EDIT:

I have a number input with an ID on it. In a MySQL database, I have a table with all the IDs and a list of options separated by commas for that ID.

I'll take one of the database records for example: The id is "ham_and_cheese" and the options are "Mayonnaise, Salad Cream, Chutney, No Dressing". Say the person selects 1 on the number input with the ID "ham_and_cheese".

Then, 1 drop down will appear with the options: "Mayonnaise, Salad Cream, Chutney, No Dressing" (Each their own option). If they choose 2, then 2 dropdowns appear, 3 then 3 appear, etc.

I am very new to Ajax so it would be great if someone could help me out.

My new code:

...

<td><input type='number' min='0' max='5' name='ham_and_cheese_amount' /></td>

...

<td id='ham_and_cheese_dressing'></td>

...

function changeDropdown(name, amount){

    //Gets the id.
    var newName = name.replace("_amount", "");

    //Gets the div that the drop down will go in.
    var el2 = document.getElementById(newName + "_dressing");

    //If number 0 is selected in number input.
    if(amount == 0){
        el2.innerHTML = "";
    }

    //If number 1 is selected in number input.
    if(amount == 1){
        var html = "<select>";
        var id = newName;
        $.ajax({
            url: 'updateDropdown.php',
            dataType: 'json',
            data: {'option_id':id},
            type: 'get',
            success: function(r){
                for(i = 0; i < r.length; i++){
                    // I use r[i].toLowerCase().replace(" ", "_") to convert "Salad Cream" to the id "salad_cream", etc.
                    html += "<option value='" + r[i].toLowerCase().replace(" ", "_") + "'>" + r[i] + "</option>";
                }
                html += "</select>";
                el2.innerHTML = html;
            }
        });
    }

}

My updateDropdown.php:

<?php

    include "/home/pi/config.php";
    $id = $_GET['option_id'];
    //I know that the connect works because I use the same code for other queries.
    $connect = mysqli_connect("localhost", $name, $pass, "items");
    if(mysqli_connect_errno()){
        return "Failed to connect to products database!";
    }
    $result = mysqli_query($connect, "SELECT options FROM products WHERE id='$id' LIMIT 1");
    $resultArray = explode(", ", mysqli_fetch_row($result)[0]);

    return json_encode($resultArray);

?>

Answer 1

The jquery :

<script type="text/javascript"> 
    $(document).ready(function () {
        var html = "<select>";
        var id = $('#idselecter').val();// ham_and_cheese
        $.ajax({
            url: "the/php/page",
            dataType: 'json',
            data : {'option_id':id},
            type: 'get',
            success: function (r) {
                for (i = 0; i < r.length; i++) {
                    html += "<option>" + r[i] + "</option>";
                }
                html += "</select>"
                $('body').append(html);// or $('#anydivid').append(html);
            }
        });
    });
</script> 

You have to return the json using json_encode($resultArray) on the php file. The $resultArray should be an indexed array.

php code :

$id = $_GET['option_id'];

// Selection query

$result = mysqli_query($connect, "SELECT options FROM products WHERE id='$id' LIMIT 1");

$resultArray = explode(", ",  mysqli_fetch_row($result)[0]);
echo json_encode($resultArray);

Answer 2

Ajax is how you get information between a back-end and the front-end.

$.ajax({                                                                            
                        url: "/url/of/php/page/that/echos/json/results",
                        data: "post variables to send",
                        type: "POST",
                        error: function(XMLHttpRequest, textStatus, errorThrown)  {
                            alert("An error has occurred making the request: " + errorThrown);
                        },
                        success: function(){
                            //do stuff here
                        }
                    });

Just build a php page that simply echos out the results of your query that are json_encoded, with nothing else sent to the UI.

Answer 3

I know this seems a bit off topic, but from what I understand of the OP, it's right on target as to what he is looking to do.

Just do a Google search for AJAX chain select and you will find a working example that will lead you in the right direction. If you need further help, leave a comment and I can reference a site that has one.