How to create a select list with javascript and populate it with php sql?

Question

I have a form created with javascript https://jsfiddle.net/wdLtv01x/1/ I need to populate my select list interviewer with PHP and MySQL

<div class="col-md-9">
   <div class="form-group">
       <label class="form-label" for="interviewerName">Interviewer par :</label>
       <select id="interviewerName" name="interviewerName_<?php echo $i;?>" style="width: 100%;">
        <?php foreach ($userList->getListUser() as $user):?>
             <option value="<?php echo $user->name; ?>"><?php  echo $user->name; ?></option>
        <?php endforeach; ?>
       </select>
  </div>

How can I create and populate my select list using javascript ?

What? You wanna do it with JS or PHP? I'm confused... the PHP part seems alright. — al'ein, Sep 11 '15 at 10:55
I want to create a dynamique form with js instead of the html and php code ! I am sorry if I was not clear enough — Hafsa, Sep 11 '15 at 12:21
So you will need 1 external php file. This one will contains all the necessary code to get the interviewer data, that you will also need to convert in JSON (for this, you can apply the `JSON_encode($array)` to the array containing the interviewer data). Then, you `printf($json_encoded_array)`, and get it back in your JavaScript through AJAX call (my advice is to use JQuery in this case, easiest way). And then you get back your json array and populate the option asynchronously. — Anwar, Sep 11 '15 at 12:28

score 1 · Accepted Answer · edited May 23 '17 at 11:58

Honestly speaking, I don't think composing a database query inside an HTML page is a good idea. Doing that will disclose information of your database you want not to disclose if you have security at heart.

The best approach is to store the values you want to pass to php into variables or in an array and pass that to PHP. You may choose a classic POST or an AJAX approach, as you please. Have a look at the links below for further information:

http://webcheatsheet.com/php/passing_javascript_variables_php.php

pass javascript variable to php mysql select query

http://w3schools.invisionzone.com/index.php?showtopic=48741

On the PHP side, you should do proper sanitation in order to avoid SQL-injection attacks. Please have a look at the following resourses:

How can I prevent SQL injection in PHP?

https://www.owasp.org/index.php/SQL_Injection_Prevention_Cheat_Sheet

http://www.codeproject.com/Articles/9378/SQL-Injection-Attacks-and-Some-Tips-on-How-to-Prev

I hope this helps.

That's ok. I am glad that my answer helped you. Thanks. – geraldCelente Sep 11 '15 at 15:46 — geraldCelente, Sep 11 '15 at 15:46

score 0 · Answer 2 · answered Sep 11 '15 at 15:02

Here is the solution

JQuery Ajax

var elt;
$.ajax({
type: "POST",
url : "./system/ajax/select_userinfos.php",
data: { user: elt},
dataType:'json',
success: function(data) {

   var select = $("#select"), options = '';
   select.empty();      

   for(var i=0;i<data.length; i++)
   {
    options += "<option value='"+data[i].name+"'>"+ data[i].name +' '+ data[i].firstname+"</option>";    
    //console.log(options);          
   }
   select.append(options);
}
});

PHP file

require_once("../classes/UserInfos.php");
require_once '../classes/UserList.php';

$userInfos    = new UserInfos();
$userList     = new UserList();
$result = array();

foreach ($userList->getListUser() as $user){

   $result[] = array(
  'name' => $user->name,
  'firstname' => $user->firstname
);
}
echo json_encode($result);

HTML

 <select id="select"></select>

How to create a select list with javascript and populate it with php sql?

2 Answers2