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;
Related
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;
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'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>
Here is some example code for one if the search field and it is a select box
<html>
<head>
<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
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();
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>
And this is HTMl code for input field
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
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","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<p><b>Start typing a name in the input field below:</b></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
This two ajax related form's are working individually..
What i want is those two opertions should take place in single form and single ajax script
can anyone help me?
thanks in advance
You can use something like -
<html>
<head>
<script>
function showHint(str,type)
{
var str2 = '';
if (type == 1)
{
if (str.length==0 && document.getElementById('users').value == '')
{
document.getElementById("txtHint").innerHTML="";
return;
} else {
str2 = document.getElementById('users').value;
}
} else {
if (str.length==0 && document.getElementById('text').value == '')
{
document.getElementById("txtHint").innerHTML="";
return;
} else {
str2 = document.getElementById('text').value;
}
}
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","gethint.php?q="+str+'&str2 = '+str2,true);
xmlhttp.send();
}
</script>
</head>
<body>
<p><b>Start typing a name in the input field below:</b></p>
<form>
First name: <input type="text" id = "text" onkeyup="showHint(this.value,'1');">
<select name="users" id = 'users' onchange="showHint(this.value','2');">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
<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.