Question

140

getting data from query sql database to javascript

rated 0 times [ 145] [ 5] / answers: 1 / hits: 26518 / 10 Years ago, wed, april 23, 2014, 12:00:00

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).

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

hakeemabramh

Add To Favorites

Follow

Total Points: 234

Total Questions: 109

Total Answers: 109

Location: Romania

Member since Mon, Jun 6, 2022

2 Years ago

answered 10 Years ago breap · Accepted Answer

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('');

   }

}