使用JavaScript函数中传递的变量

Question

I have a select with all my countries and I call to a function onChange to get the list of cities for that country as per the code below:

<select name="country" id="country" onChange="getCity(this.value)">

and I have the code to get the list of cities from my database as per code below:

<script language="javascript" type="text/javascript">
function getCity() {
    $(function(countryId) {
         var str = '<select name="city" id="city"><?php $query = "SELECT city FROM cities where country = 'countryId'";

    $result = pg_query($query);
    if (!$result) {
        echo "Problem with query " . $query . "<br/>";
        echo pg_last_error();
        exit();
    }
    printf ("<option value=Select>Select a City</option>");
    while($myrow = pg_fetch_assoc($result)) {

     printf ("<option value=$myrow[city]>$myrow[city]</option>");

}?></select>';  
        document.getElementById('citydiv').innerHTML= str;
    });
}
</script>

How can I pass the variable countryId?

If I use the following trying to use the variable countryId my code is not working.

var str = '<select name="city" id="city">
<?php $query = "SELECT city FROM cities where country = 'countryId'";

However, if I change the value and introduce a particular value manually then it works:

var str = '<select name="city" id="city">
<?php $query = "SELECT city FROM cities where country = 'Albania'";

Please notice that my var str is storing all the following code to write up the city Div as it goes:

var str = '

var str = '<select name="city" id="city"><?php $query = "SELECT city FROM cities where country = 'Spain'"; 
    $result = pg_query($query);
    if (!$result) {
        echo "Problem with query " . $query . "<br/>";
        echo pg_last_error();
        exit();
    }
    printf ("<option value=Select>Select a City</option>");
    while($myrow = pg_fetch_assoc($result)) {

     printf ("<option value=$myrow[city]>$myrow[city]</option>");

}?></select>';  

UPDATE

Based on the answers, I'm looking to accomplish something like

<script language="javascript" type="text/javascript">
function Nadaquever(countryId) {
    $(function() {
         var str = '<select name="city" id="city"><?php $query = "SELECT city FROM cities where country = ' + countryID + '"';          
         str += '$result = pg_query($query);';
         str += 'if (!$result) {';
         str += 'echo "Problem with query " . $query . "<br/>";';
         str += 'echo pg_last_error();';
         str += 'exit();';
         str += '}';
         str += 'printf ("<option value=Select>Select a City</option>");';
         str += 'while($myrow = pg_fetch_assoc($result)) {';
         str += 'printf ("<option value=$myrow[city]>$myrow[city]</option>");';
         str += '}?></select>';

document.getElementById('citydiv').innerHTML= str;
    });
}
</script>

But it is not working

Thank you so much

Answer 1

To apend a variable in Javascript you have to use + sign see the code below.

var str = 'blah blah blah';
str += ' blah';
str += ' ' + 'and some more blah';

also you need to pass the country id like this

function getCity(countryId) {

Answer 2

You need to understand about javascript string c​oncatenation

It has to change like below code.

[right code]

var countryId = "myId";
var str = '<select name="city" id="city"><?php $query = "SELECT city FROM cities where country = ' + countryId + '"';

Answer 3

I don't see how this will ever send your SQL query to your database. If you are just concatenating Javascript strings together you will end up with just that - a string that contains some PHP tags which never sees the server (try logging the str var you have to the console and see what you have).

You'll need to think about the flow of your application. Based on how you are trying to get your Javascript function getCity() to fire when the option in the select box changes I assume you don't want to reload the page therefore you would need to send your SQL query to your database via AJAX.

So assuming your markup looks like this:

<div id="citydiv">
  <select id="country" name="countryID">
    <option value="Select">Select a Country</option>
    <option value="Albania">Albania</option>
  </select>
  <select id="city" name="city">
    <option value="Select">Select a City</option>
  </select>
</div> 

You could use jQuery to generate the options for the city field like so:

$(function(){
  $('#country').on('change',function(){
    $.ajax({
      url: '/getCities.php',
      method: "POST",
      data: {countryID: $('#country').val() }
    })
    .done(function(data){
      $('#city').html(data);
    });
  });
});

This would send any onchange events to the getCities.php file where you can retrieve the countryID from $_POST['countryID'] and then insert this into your SQL query, retrieve the resultset and then print out the options for the select field. jQuery would then set the options of the select field to the result of the PHP script.

Also, it would be worth considering using Postgres prepared statements when querying your database to improve security.