CODEWITHSUNDEEP
phpjquerymysqljsonajax
zoefrankie
zoefrankie

Reputation: 29

How to populate a select from mysql using Ajax and json

I have an empty select in HTML that i want to populate through the database.

I have a button that opens a Modal and passes an id. With that ID i fetch the Data from the database and fill all the form fields for one company. However a company can have multiple employees, so i want to fill a select so that all employees that have the same ID as the company, will be shown.

For example:

Company ID is 43, i fill all the form fields (name, location etc.) using this id and fetching the data from the database. In the table employee there are 3 employees that have the ID 43 as FK, let's name them hans, max and peter. Now i want to populate a select that shows all 3 of them, so that an user can select one of them and depending on that selection an empty form will be populated, so that it can be edited.

I'm assuming this involves a loop, but i'm not sure how to do it. Not sure if it's relevant but all my mysqli calls use prepare, as i've read this is more secure.

The loop i've tried so far is this, but it's not working. I'm not sure if it's the loop that isn't working or if i'm trying to populate the select wrong.

This is inside a select and all the input fields get populated.

while ($row = $result->fetch_assoc()){
$prename= $row['prename'];
$surname= $row['surname'];

$users_arr[] = array("prename" => $prename, "surname" => $surname);
}

Then i return the data as follows

echo json_encode(array('users_arr'=>$users_arr));

and try to populate the select in the AJAX success

$.each(data.users_arr, function(key, val){ 
$("#contact_persons").append('<option id="' + data.prename + '">' + data.surname + '</option>');
});

Thanks

Edit: The complete Ajax call:

$.ajax({
            url: url,
            data: data,
            dataType: 'json',
            cache: false,
            type: "POST",    
            error: function () {


                    $('#alertdone').removeClass('hidden');



        },
        //if ajax call is successful populate form fields and hide error message
        success: function (data) {


            //hide error message
            $('#alertdone').addClass('hidden');


                $.each(data.users_arr, function(key, val){ 
                $("#contact_persons").append('<option id="' + data.prename + '">' + data.surname + '</option>');
                });


            }


        });
    });

Upvotes: 1

Views: 295

Answers (1)

SRK
SRK

Reputation: 3496

In your AJAX success you can try

var d = $.parseJSON(data);
$.each(d.users_arr, function(index, element) {
$("#contact_persons").append('<option id="' + element.prename + '">' + element.surname + '</option>');
});

Edit

$.ajax({
            url: url,
            data: data,
            cache: false,
            type: "POST",    
            error: function () {
                    $('#alertdone').removeClass('hidden');
             },
            success: function (data) {
             //hide error message
            $('#alertdone').addClass('hidden');
            var d = $.parseJSON(data);
            $.each(d.users_arr, function(index, element) {
            $("#contact_persons").append('<option id="' + element.prename           + '">' + element.surname + '</option>');
            });
            }
        });
    });

Upvotes: 1

Related Questions