I have encountered a problem, where I planned to get values with javascript which is from mysql.
What I am trying to do is, when you load a PHP page to edit info, you add a div using javascript, there will be a bunch of types to choose from, But I would like to do it through retrieve from database. But it seems doesn't work, so I went on with another type of code.
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$mysql_server_name="localhost";
$mysql_username ="root";
$mysql_password ="root";
$mysql_database ="master_db";
$conn =mysql_connect($mysql_server_name,$mysql_username,$mysql_password);
if (!$conn)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db($mysql_database,$conn);
$sql="SELECT * FROM `bopl_certification_type`";
$result = mysql_query($sql);
echo "<div class='span6 form-horizontal'><i class='icon-remove' onclick='removeDiv(this)'></i><div class='control-group'><label class='control- label'>Certificate Name: </label><div class='controls'><select style='width:250px' name='certType[]'>";
//To get option
while($row = mysql_fetch_array($result)) {
echo "<option value=$row[certName]>$row[certName]</option>";
}
//End of option
echo "</select><input type='text' class='input-xlarge' name='test' style='width:235px' name='fileInServ[]' readonly='readonly' /><input type='file' name='docupload[]' /></div><div class='control-group'><label class='control-label'>Issue date: </label><div class='controls'><input type='text' id='datepickerIs' name='certIsDate[]' placeholder='dd-mm-yyyy' class='comboDate' /></div></div><div class='control-group'><label class='control-label'>Expired date: </label><div class='controls'><input type='text' id='datepickerEx' name='certExDate[]' placeholder='dd-mm-yyyy' class='comboDate' /></div></div> </div>";
?>
</body>
</html>
That was the getuser.php and this is the index.html
<html>
<head>
<script>
function showUser() {
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("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users" onclick="showUser()">
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
</body>
</html>
This is the proper result that I wanted. But it seems that I tried to integrate into my existing codes. It doesn't work at all. Is there any other way around it?
First I would create a function for your server calls to simplify things. This is the one that i use but it uses the main thread so if you want it to be async then you will have to add on readystatechange and change true to false on the initial declaration however, this is my function for retrieving.
function httpGet(theUrl){
//FETCH Data From Server
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET", theUrl , false );
xmlhttp.send();
return xmlhttp.responseText;
}Then from anywhere in your script you can call
document.getElementById("txtHint").innerHTML = httpGet("getUser.php");
now for any additional help we really need to know, what errors your receiving.
</div>