How to replace a javascript select box with PHP function data?

user_16383273 0
Viewed 89

I am new to JavaScript. I have the following JavaScript code in my onboard.js file.

var questions = [
  {question: "What's your country?", type: "select", response: ['India','America','Japan']}
]

The code above is a sample code that contains list of three countries statically. I have a PHP function that returns the list of 251 countries from the database in my functions.php file. How can I replace the response part of the above JS code with the data list of countries returned from my PHP function below?

function countriesForJS(){
  global $pdo;

  $stmt = $pdo->prepare("SELECT id, name FROM countries");
  $stmt-> execute();

  while($row = $stmt->fetch()){
    $data[] = $row;
  }

  return $data;
}
php javascript
2 Answers

Your question could be interpreted differently, but I have two possibilities:

1 - Assuming that the JS script and PHP script are separated, then you need to do an http request to the server (using AJAX for example)

2 - Assuming that the JS & PHP code are in the same script, I would suggest to embed php code in the JS code as below:

<script>
...
var serverCountries = "<?php echo implode(",", countriesForJS()) ?>";
var questions = [
  {
    question: "What's your country?", 
    type: "select", 
    response: serverCountries.split(',')// replace the existing response by server countries 
    /*
    response: ['India','America','Japan', ...serverCountries.split(',')]// or add server countries to the existing response */
  }
];
...
</script>

EDIT (JS, PHP Scripts are separated) In this case, I assume the server is accessible via an endpoint, and the script output could be reached by calling for example the api url below: http://[YOUR_HOST]/my_php_script.php [assuming again that the http method is GET and there is no authentication]

In this case, here is a jQuery ajax request could be done from your JS script:

(you need to import jQuery if it's not already done)

$.ajax({
     url: "http://[YOUR_HOST]/my_php_script.php",
     type: 'GET',
     dataType: 'json', // added data type
     success: function(serverCountries) {
         console.log(serverCountries);
         var questions = [
            {
                question: "What's your country?", 
                type: "select", 
                response: serverCountries
            }
         ];
         // do something with your questions variable ....
     }
});

And the my_php_script.php script is something like:

<?php 
function countriesForJS(){
  global $pdo;

  $stmt = $pdo->prepare("SELECT id, name FROM countries");
  $stmt-> execute();

  while($row = $stmt->fetch()){
    $data[] = $row;
  }

  return $data;
}

$data = countriesForJS();
header('Content-Type: application/json');
echo json_encode($data);

?>
user_61928340

if u use jquery, can use autocomplete, that make a request to your php and fill a input field with that data retrieved.https://jqueryui.com/autocomplete/

        $('#el nombre de tu input').autocomplete({
          source: function (request, response) {
            $.ajax(
              type: 'GET',
              url: route + 'la ruta de tu archivo php',
              data: {
                term: request.term, // term es lo que envias a php para filtrar
              },
              success: function (data) {
                response(data)
              }
            })
          },
          minLength: 1,
          select: function (event, ui) {
            codeAccountGenAnaPro = ui.item.code // codeAccountGenAnaPro es el valor donde se va a guardar una vez selecciones del autocomplete
          }
        })

ojala te guste la respuesta y te ayude

user_127651000
Related