Load PHP array into html as select options

Question

I am having trouble working the finishing touches out with this. I am still fairly new to ajax and json, but here's what i have so far. I am trying to take an array(s) from a php file and load them into a select dropdown (#input) via ajax/json. I think i'm pretty close, but i'm not sure where i'm messing up. Please help

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<script src="../_js/jquery-1.7.2.min.js"></script>

<script>
$(document).ready(function() {

if ($("#numbers").val() == "2") {
        $.ajax({
            type: 'POST',
            url: 'login.php',
            data: 'id=testdata',
            dataType: 'json',
            cache: false,
            success: function(result) {
                var numbers = <?php echo json_encode($array); ?>;
                for (i=0;i<numbers.length;i++){
                    $('#input').append("<select>" + numbers[i] + 
"</select>");
                }           
            },

        });
} 

});
</script>

</head>
<body>
<div class="wrapper">
    <div class="header">
    </div>
    <div id="content">
        <div class="main">
            <div id="formwrapper">


        <select id="numbers">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <select id="input"></select>


</div>
        </div>
    </div>

</div>
</body>
</html>

And here is my PHP (login.php)

<?php
$array = array(1,2,3,4,5,6);
echo json_encode($array);
?>

What is happening that you don't expect? Also, it looks like you don't understand AJAX at all. — crush
– crush, Commented May 31, 2013 at 18:22

crush · Accepted Answer · 2013-05-31 18:43:10Z

2

In your script, you aren't doing anything with the data that is returned from the AJAX call. I suspect that is because you don't understand how AJAX works. I'll try to explain it without going into super deep detail.

When you make an AJAX call to a URL, you are making an HTTP request, just like when you type http://www.google.com into your web browser. In response, the server at the other end of that URL sends you an HTTP response with some data.

In the case of your AJAX, you are requesting the response of login.php, which, I will assume, is the PHP you added to your question above. In the success function, you get a result. That result is everything that was output by login.php.

So,

$(document).ready(function() {
    $("#numbers").change(function(e) {
        if ($(this).val() == "2") {
            $.ajax({
                type: 'POST',
                url: 'login.php',
                data: 'id=testdata',
                dataType: 'json',
                cache: false,
                success: function(result) {
                    var numbers = result; //result is equal to your array from the php. You don't put PHP here.
                    $('#input option').remove(); //Remove any existing options.
                    for (i=0;i<numbers.length;i++){
                        $('#input').append("<option>" + numbers[i] + "</option>");
                    }           
                }
            });
        }
    });
});

If login.php is NOT the PHP you added above, then I'm not going to be able to help you until you tell me what file that is from.

Also, notice that we wrapped the AJAX call into a change event on the #numbers select box. That way, when the select box's value changes, it will call this AJAX, and select the numbers.

Thanks for the assist tymeJV.

edited May 31, 2013 at 18:43

answered May 31, 2013 at 18:28

crush

17.1k10 gold badges65 silver badges104 bronze badges

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

9 Comments

tymeJV Over a year ago

Shouldn't it be $("#input").append("<option>" + numbers[i] + "</option>");

crush Over a year ago

You're right. I just went with what he had in that block. Fixed now.

tymeJV Over a year ago

There's also a trailing , at the end of the success function :)

crush Over a year ago

I also suspect that the if block is wrong, but I'm not sure what he's attempting to accomplish there.

tymeJV Over a year ago

I was just looking at that...this code will NEVER run if the default selected option isn't set to 2. I'm assuming OP wants this nested in a change() event.

|

Collectives™ on Stack Overflow

Load PHP array into html as select options

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related