getting data from query sql database to javascript

Question

I have a problem with my code.
case like this:
I have a dropdown, if selected "personal" it appeared the new dropdown that contains the data that is retrieved from a database query, if selected "public", then the dropdown disappear.
HTML code like this:

<select name="use" class="dropdown" id="sender" onChange='changeSend()'>
     <option value=1>Public</option>
     <option value=0>Personal</option>
</select>

<div id='send2'></div>

Query like this:

<?php
    $query = mysql_query("select * from data where id_user = '$id_user' order by date asc");
    $i = 0;
    $id = array();
    $name = array();
    while($data = mysql_fetch_array($query)){
       //id from result database query
       $id[$i] = $data['id'];
       //name from result database query
       $name[$i] = $data['name'];
       $i++;
    }
?>

JavaScript code like this:

function changeSend() {
   var selectBox = document.getElementById("sender");
   var selectedValue = selectBox.options[selectBox.selectedIndex].value;
   if (selectedValue==0) {
       $('#send2').html("<select class='dropdown'><option value='-id from result database-'>-name from result database query-</option></select>");
   } else { 
    $('#send2').html('');
   }
}

I dont know how to send value/result ($id[0],$name[0],$id[1],$name[1], etc..) to javascript code(value and name in select options).

TheGr8_Nik · Accepted Answer · 2014-04-23T08:37:29.560

In javascript you have to make an ajax call to your php file:

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("send2").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","yourFile.php",true);
xmlhttp.send();

And in your php file you have to echo your data in JSON format:

echo json_encode(array('id'=>$id,'name'=>$name));

UPDATE in your case use the following code: (not tested)

php code:

<?php
    $query = mysql_query("select * from data where id_user = '$id_user' order by date asc");
    $i = 0;
    $options = array();
    while($data = mysql_fetch_array($query)){
       $options[$data['id']] =  $data['name'];
    }
    echo json_encode($options);
?>

javascript code:

var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}
else{// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
      var response = JSON.parse(xmlhttp.responseText);
      var select = '<select class='dropdown'>';

      for( var index in response ){
          select = select + "<option value='"+ index +"'>"+response[index]+"</option>";
      }
      select += "</select>";
      document.getElementById("send2").innerHTML= select;
  }
}
function changeSend() {
   var selectBox = document.getElementById("sender");
   var selectedValue = selectBox.options[selectBox.selectedIndex].value;
   if (selectedValue==0) {
       xmlhttp.open("GET","yourFile.php",true);
       xmlhttp.send();
   } 
   else { 
     $('#send2').html('');
   }
}

USING jQuery

javascript code:

function changeSend() {
   var selectBox = document.getElementById("sender");
   var selectedValue = selectBox.options[selectBox.selectedIndex].value;
   if (selectedValue==0) {

       $.get("yourFile.php", function(data){
           var response = JSON.parse(data);
           var select = '<select class='dropdown'>';

           for( var index in response ){
               select = select + "<option value='"+ index +"'>"+response[index]+"</option>";
           }
           select += "</select>";

           $("#send2").html(select);
       });

   } 
   else { 
     $('#send2').html('');
   }
}

I see that you are using jQuery, the next time add the jQuery tag on the question, so we can provide jQuery based answers ;-) — TheGr8_Nik, Apr 23 '14 at 07:40
on php code, why like this? `$options[$data['id']] = $data['name'];`? I want to get data_id and data_name from result database query. — user3193610, Apr 23 '14 at 07:43
it's for build an array with the data loaded from database contained in the `$data` array — TheGr8_Nik, Apr 23 '14 at 07:50
Because the response is parsed in the variable `response` in the line `var response = JSON.parse(xmlhttp.responseText);` — TheGr8_Nik, Apr 23 '14 at 08:32
why your solution can not be tried? i can't -> **if selected "personal" it appeared the new dropdown that contains the data that is retrieved from a database query, if selected "public", then the dropdown disappear.** — user3193610, Apr 23 '14 at 18:57

score 0 · Answer 2 · answered Apr 23 '14 at 07:07

0

The best way would probably be with an ajax call, anyway if you are declaring the script in the same page with the php, you can json encode the array with the options so that you will be able to access it into the javascript, like this:

var optionIds = <php echo json_encode($id); ?>
var optionNames = <php echo json_encode($name); ?>

answered Apr 23 '14 at 07:07

EveryWell

193
1
7

how can i add var optionIds and optionNames to `$('#send2').html("");` ? – user3193610 Apr 23 '14 at 07:17
To add javascript variable between string, use: 'yourstring' + variable + 'yourstring'; – Ruben Apr 23 '14 at 09:59

getting data from query sql database to javascript

2 Answers2

Linked

Related