how to fill a select created in javascript with database?

Question

I'm creating a select in javascript and I'm using this statement to fill the options with the data in the database, but I do not load the data in the option and nor the select when I enter the page, What am I doing wrong?

var option1 = document.createElement("select");
option1.setAttribute("name","select1");
option1.setAttribute("id","select1"+largo);
option1.className ="select";


var miOption1=document.createElement("option");
<?php
  $stmt=user($conn);
  $arr = $stmt->fetchAll(PDO::FETCH_ASSOC);
  foreach ($arr as $row) {
miOption1.setAttribute("value",".$row['us_id'].");
miOption1.setAttribute("label",".$row['us_nom'].");

    }
 ?>  

  option1.appendChild(miOption1);

You are using a javascript variable `miOption1` inside your PHP code!. You should understand the basics of server (PHP) code that will run on the server and the client(Javascript) code that will run on the machine of the client browser. — Accountant م, Dec 15 '18 at 21:57
You can't call javascript functions in php. But you can print these lines so that they will be called in javascript — Thomas Sablik, Dec 15 '18 at 22:08
Required reading: https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming — mario, Dec 15 '18 at 22:10

score 2 · Accepted Answer · answered Dec 15 '18 at 22:10

The problem is that you doen't output and use code correctly. You mix Javascript and PHP.

I think you want something like this :

var option1 = document.createElement("select");
option1.setAttribute("name","select1");
option1.setAttribute("id","select1"+largo);
option1.className ="select";

// PHP code interpreted by server
<?php
  $stmt=user($conn);
  $arr = $stmt->fetchAll(PDO::FETCH_ASSOC);

  foreach ($arr as $k => $row)
  {
      // Output code
      echo 'var miOption'.$k.'=document.createElement("option");'
      echo 'miOption'.$k.'.setAttribute("value",'.$row['us_id'].');'
      echo 'miOption'.$k.'.setAttribute("label",'.$row['us_nom'].');'
      echo 'option1.appendChild(miOption'.$k.');'
    }
 ?>

yourElement.appendChild(option1);

I corrected my answer using your `$k` variable, thanks , I forget about the names of the variables. — Accountant م, Dec 15 '18 at 22:36

Accountant م · Answer 2 · 2018-12-15T22:35:47.460

This should quick fix your code

<?php
  $stmt=user($conn);
  $arr = $stmt->fetchAll(PDO::FETCH_ASSOC);
  foreach ($arr as $k => $row) {
   echo "var miOption$k=document.createElement(\"option\");\n";
   echo "miOption$k.setAttribute(\"value\",\"". $row['us_id'] . "\");\n";
   echo "miOption$k.setAttribute(\"label\",\"". $row['us_nom'] . "\");\n";
   echo "option1.appendChild(miOption$k)\n";
    }
 ?>

however I prefer to build the select HTML with the PHP directly and not use JavaScript for that, something like this

<?php
  $stmt=user($conn);
  $arr = $stmt->fetchAll(PDO::FETCH_ASSOC);
  $selectHTML = "<select>";
  foreach ($arr as $row) {
     $selectHTML .= "<option ";
     $selectHTML .= "value ='" . htmlspecialchars($row['us_id']) . "' >";
     $selectHTML .= htmlspecialchars($row['us_nom']) ;
     $selectHTML .= "</option>\n";
  }
  $selectHTML .= "</select>";
  echo $selectHTML;
 ?>

how to fill a select created in javascript with database?

2 Answers2