getting data from query sql database to javascript
21,723
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('');
}
}
Author by
user3193610
Updated on April 23, 2020Comments
-
user3193610 about 4 years
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).