I'm trying to branch out into Ajax calls for some of my MySQL queries on a Wordpress site I run. To do this I've been following the example here.
I haven't modified the javascript component, only the form and then I'm using a very simple snippet of php to see if $q is getting fed to php or not.
On page startup I'm getting the correct echo ALL however on selecting anything in the dropdown menu I'm finding that there is no change in the echo of $q.
What am I missing here? I'm using Google Chrome as my browser if that is an issue.
<html>
<head>
<script type="text/javascript">
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
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 (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a team:</option>
<option value="HAW">Hawks</option>
<option value="GEE">Cats</option>
<option value="ADE">Crows</option>
<option value="WCE">Eagles</option>
</select>
</form>
<br>
<div id="txtHint"><b>Team info will be listed here...</b></div>
</body>
</html>
My simple php code is:
$q = $_GET['q'] ?: 'ALL';
echo $q;
Related
Hi Guys how can I send the value/s of <select mutiple> tag via Ajax Call? Thanks
I have my <select multiple> tag here
<select multiple name='user[]' onchange="showUser(this.value)">
<option value="1"> User 1 </option>
<option value="2"> User 2 </option>
</select>
Here it the <script> Tag
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
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?q="+str,true);
xmlhttp.send();
}
}
I want to send the multiple values from my back-end (getuser.php) then I call it by MYSQL SELECT(), back to my html page and show it to my index.php<select> tag
like this <html> Index.php
<select id="txtHint">
<option> 1 = select[value=1] </option>
<option>2 = select[value=2]</option>
</select>
Note: These codes work only in single <select> tag but not in multiple, How can I run this in Mutiple Select Tag ?
Thank You Guys
I want to pass two variables to my .php page ... the drop down variable is working great. But when I added an additional variable, it only sends a 0 instead of what I enter in the form.
I feel like I'm fairly close to the solution on this ... when I substitute a number on this line:
xmlhttp.open("GET","getdeposit.php?q="+str + "&r=" +restaurant, true);
instead of +restaurant, I use + 101 ... then this page correctly passes 101 ... but when I just enter the number in my form, it returns 0
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
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","getdeposit.php?q="+str + "&r=" +restaurant, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<p>
<label for="restaurant">Restaurant:</label>
<input type="text" id="restaurant" name="restaurant" placeholder="Enter Restaurant" />
</p>
<select name="users" onchange="showUser(this.value)">
<option value="">select a date</optoin>
<option value=" ">Today</option>
<option value="1">Yesterday</option>
<option value="2">Two Days Ago</option>
</select>
</form>
<div id="txtHint"><b>Select Business Date</b></div>
</body>
</html>
Add the following just above the if statement in your js function :
var restaurant = document.getElementById('restaurant').value;
I'm trying to display data from database(MySQL) based on the option fields selected. I have two fields as shown below :
Select a Health Block : .......(list)
Select the year : .......(list)
When I select health block and year, data from database should be displayed on the same page itself. I've tried the following code. Actually the code works if I've only one option ('year') to be selected. What I need is to pass both the values (Health block and Year) to the page (getblock2.php) where I've written the code to retrieve data from database. Can anybody please help me to figure out where the problem is?
Mainpage
<html>
<head>
<script type="text/javascript">
var str11;
var str22;
function showB(str2)
{
str22=str2;
}
function showBlock2(str)
{
showB();
str11=str;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getblock2.php?q="+str11+"&h="+str22,true);
xmlhttp.send();
}
</script>
</head>
<body>
Select a Health block
<select name="h" onChange="showB(this.value)">
<option value="1">H1</option>
<option value="2">H2</option>
</select>
<br/>
Select a year
<select name="yr" onChange="showBlock2(this.value)">
<option>2012</option>
<option>2013</option>
</select>
<div id="txtHint" style="width:570px; height:auto" >
</div>
</body>
</html>
getblock2.php
<?php
include("connect.php");
$q=$_GET["q"];
$h=$_GET['h'];
$q="select Total_Cases from epidemics where Year1=$q and Hid=$h";
$r=mysql_query($q);
$i=0;
while($row=mysql_fetch_row($r))
{
$i++;
echo $i." ".$row[0]."<br/>";
}
?>
Variable str22 is not being assigned when you call showBlock2() on changing year. So replace the line
showB();
with
showB(document.getElementsByName("h")[0].value);
This would work when you select health and then year, no need to call showB() on changing health list.
EDITED (Optimized Code):
The following code has been altered from your source.
Mainpage
<html>
<head>
<script type="text/javascript">
function showBlock2()
{
var str11=document.getElementsByName("h")[0].value;
var str22=document.getElementsByName("yr")[0].value;
document.getElementById("txtHint").innerHTML="";
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getblock2.php?q="+str11+"&h="+str22,true);
xmlhttp.send();
}
</script>
</head>
<body>
Select a Health block
<select name="h" onChange="showBlock2()">
<option value="1">H1</option>
<option value="2">H2</option>
</select>
<br/>
Select a year
<select name="yr" onChange="showBlock2()">
<option>2012</option>
<option>2013</option>
</select>
<div id="txtHint" style="width:570px; height:auto" >
</div>
</body>
</html>
Note that only function showBlock2() is used for onchange on both dropdowns, so the div txtHint is updated at each change. Also no parameters passed.
Just remove
showB()
It will work fine. As you have already values in both variables. Just showB() function is making the variable empty again.
Here is the optimized code. It can work in both cases, which ever select option you select first.
<script type="text/javascript">
var healthValue = "";
var yearValue = "";
function showB(str2)
{
healthValue = str2;
if(yearValue != '')
{
callAjax();
}
}
function showBlock2(str)
{
yearValue = str;
if(healthValue != '')
{
callAjax();
}
}
function callAjax()
{
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getblock2.php?q="+healthValue+"&h="+yearValue,true);
xmlhttp.send();
}
</script>
I got a simple AJAX demo code from internet which fills one select listbox dynamically with values from database. It contains a html file with AJAX code embedded in it and a PHP file.
The problem is this code works fine in IE, Chrome, FireFox4 but its not works in FireFox3. Please any one explain this and tell me the solution. The code is as follows for reference
The database schema for city table is as follows
id tinyint(4) primary key not null
city varchar(50)
countryid tinyint(4)
HTML File
<html>
<head>
<script type="text/javascript">
function getCity(strURL)
{
alert("inside getCity function");
//var req = getXMLHTTP(); // function to get xmlhttp object
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
//xmlhttp=new XMLHttpRequest();
req=new XMLHttpRequest();
}
else
{// code for IE6, IE5
//xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
req=new ActiveXObject("Microsoft.XMLHTTP");
}
if (req)
{
req.onreadystatechange = function()
{
if (req.readyState == 4) { //data is retrieved from server
if (req.status == 200) { // which reprents ok status
document.getElementById('citydiv').innerHTML=req.responseText;
}
else
{
alert("There was a problem while using XMLHTTP:\n");
}
}
}
//alert(srtURL);
var sURL="findcity.php?country="+strURL;
req.open("GET", sURL, true); //open url using get method
req.send();
}
}
</script>
</head>
<body>
<form method="post" action="" name="form1">
Country : <select name="country" onChange="getCity(this.value)">
<option value="">Select Country</option>
<option value="1">india</option>
<option value="2">usa</option>
</select>
<br />City : <div id="citydiv">
<select name="select">
<option>Select City</option>
</select>
</div>
</form>
</body>
</html>
PHP file
<?
echo $_GET['country'];
echo "<br>";
$country=intval($_GET['country']);
echo $country;
echo "<br>";
$link = mysql_connect('localhost', 'root', 'mark'); //change the configuration if required
if (!$link) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db('querytest'); //change this if required
$query="select city from city where countryid=$country";
echo "<br>";
echo $query;
echo "<br>";
$result=mysql_query($query);?>
<select name="city">
<option>Select City</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value><?=$row['city']?></option>
<? } ?>
</select>
Please guide me friends to make this code working in FireFox 3
Change
req.send();
to
req.send(null);
<script type="text/javascript">
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest) {
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;
//document.myForm.text1.value=.innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET", "getuser.php?q=" + str, true);
xmlhttp.send();
}
</script>
</head>
<body>
<form name="myForm">
<p>Selec the Menu :
<select name="users" onchange="showUser(this.value)">
<option value="">Select ID</option>
<?php do { ?>
<option value="<?php echo $row_rscustomer['customer_number']?>"><?php echo $row_rscustomer['customer_number']?></option>
<?php } while ($row_rscustomer = mysql_fetch_assoc($rscustomer));
$rows = mysql_num_rows($rscustomer);
if ($rows > 0) {
mysql_data_seek($rscustomer, 0);
$row_rscustomer = mysql_fetch_assoc($rscustomer);
} ?>
</select>
</p>
<p> </p>
<p>
<input name="text1" type="text"
value="<?php include (" getuser.php");?>"/>
<p>
</form>
<div id="txtHint"></div>
Hey - I noticed that, inside your AJAX onreadystatechange function, you have added xmlhttp.status==200 to your conditional. In some browsers, as AJAX is a client-side language, this isn't supported. If the member status isn't supported by the user's browser, then its default value will either be undefined or 0, either way the value will never be 200, thus the block inside that conditional won't be executed.
I suggest removing the xmlhttp.status==200 condition, and just relying on xmlhttp.readyState. I had this problem when I first started with AJAX.