I created 3 drop down list in my html. For the first drop down, once user selects an option, a function is called on onchange. This runs a php script on the server and then updates the second drop down list. However, After it updates the second drop down list, the third drop down list disappears. Is there anything wrong with my code? If so, how should I change it to?
.html
<script type="text/javascript">
function showApplications(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("appname").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("appname").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getApplications.php",true);
xmlhttp.send(null);
}
</script>
<script type="text/javascript">
function showTargets(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("target").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("target").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getTargets.php",true);
xmlhttp.send(null);
}
</script>
</head>
<body>
<form action="post">
Environment:
<select name="customers" onchange="showApplications(this.value)">
<option value="Environment">Select an environment:</option>
<option value="SandBox">Sandbox</option>
<option value="Production">Production</option>
</select>
</br>
</br>
Application Name: <div id="appname">
<select name="customers" onchange="showTargets(this.value)">
<option value="">Select application:</option>
</select>
Target: <div id="target">
<select name="select">
<option>Select one option</option>
</select>
</div>
</form>
</br>
</body>
</html>
.php
<?
$link = mysql_connect("127.0.0.1:3306", "root", "");
if(!$link){
die('Could not connect: ' . mysql_error());
}
mysql_select_db("PushApplication");
$query="SELECT AppName FROM Applications";
$result=mysql_query($query);
?>
<select name="state" onchange="showTargets(this.value)">
<option>Select application</option>
<? while($row=mysql_fetch_array($result))
{
?>
<option value=<?=$row['AppName']?>><?=$row['AppName']?></option>
<?
}
?>
</select>
You're missing a close tag for your element <div id="appname">. Close it up after your select element and your script should work just fine.
Related
when i select dropdown value it gives me price but removes all previous value.
how to return product name and dropdown value after it execute below ajax code?
function refresh_load is a ajax function.
enter code here
<div class="product_sub"><input type="text" name="prod[]" id="prod0" size="30" class="input_box" onkeyup="autocomp()"/><input type="hidden" name="txt_pid[]" id="txt_pid0" /></div>
<div class="product_sub"><select name="price" id="price" class="input_box" onchange="refresh_load()"><option value="">Select</option>
<option id="billing_price" value="Billing Price">Billing Price</option>
<option id="selling_price" value="Selling Price">Selling Price</option></select></div>
<script type="text/javascript">
function refresh_load()
{
//alert('hi');
var price=document.getElementById('price').value;
var prodid=document.getElementById('txt_pid0').value;
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
//alert(xmlhttp.responseText);
//document.images['imgtrue1'].src="../images/"+xmlhttp.responseText.split("#t#")[0];
document.getElementById("rate").value=xmlhttp.responseText;
}
}
//xmlhttp.open("GET","ref_cat_class.php?val="+val+"&val2="+val2,true);
//alert(p);
xmlhttp.open("GET","refresh_page.php?price="+price+"&prodid="+prodid,true);
xmlhttp.send();
//alert('hiii');
document.getElementById("frmmonthly").reset();
}
</script>
Function refresh load is having this line,
document.getElementById("frmmonthly").reset();
which is resetting your form values.
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 have many input values from a form, and I would like to push them to PHP code using ajax code. Here's an example of what i'm trying to do. I have test1 and test2 that i want to keep track when user press search button.
Right now it only get the value of test1 "getResults(this.test1.value)" I would like to know how to get the test2 value using the same method.
<form name="input" action="" method="" onsubmit="getResults(this.test1.value); return false;">
<input type="text" name="test1">
<select id="test2" name="test2">
<option value="">Make a choice ...</option>
<option value="c1">choice 1</option>
<option value="c2">choice 2</option>
<option value="c3">choice 3</option>
</select>
<input type="submit" value="Search">
</form>
<div id="here"><b></b></div>
The getresults method, right now it only support one string, how can I add more arguments ?
function getResults(str)
{
if (str=="")
{
document.getElementById("here").innerHTML="";
return;
}
else (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("here").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","info.php?q="+str,true);
xmlhttp.send();
}
and finaly and more importantly how can I retreive values from info.php ? Thanks a lot
<?php
$test1 = $_GET['test1'];
echo "$test1";
$test2 = $_POST["test2"];
echo "$test2";
?>
You don't need to pass argument to the function. We can grab the form fields value there.
<html>
<head>
<script type="text/javascript">
function getResults()
{
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("here").innerHTML=xmlhttp.responseText;
}
}
var data = "test1="+document.getElementById("test1").value+"&test2="+document.getElementById("test2").value;
xmlhttp.open("POST","info.php",true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send(data);
}
</script>
</head>
<body>
<form name="input" action="" method="" onsubmit="getResults(); return false;">
<input type="text" name="test1" id="test1">
<select id="test2" name="test2">
<option value="">Make a choice ...</option>
<option value="c1">choice 1</option>
<option value="c2">choice 2</option>
<option value="c3">choice 3</option>
</select>
<input type="submit" value="Search">
</form>
<div id="here"><b></b></div>
</body>
</html>
Than in your info.php file do this to grab the variables sent via Ajax,
<?php
$test1 = $_POST["test1"];
$test2 = $_POST["test2"];
echo "Test1: ".$test1."<br/>Test2: ".$test2."";
?>
The reason it doesn't pull both values is because 1) you need to add a method to your form. You can either do post or get, not both.2) In your php you define test 1 as from the get array and variable 2 as from the post array. If you make $test2 from the get array it should work.
I have this code (below) that works on FF&Chrome but doesn't work on IE*. I am trying to populate the select tag with email address. Thanks
question.php
<html>
<head>
<script type="text/javascript">
function myFunction(val)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST","qsrcipt.php?q="+val,true);
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.send();
}
</script>
</head>
<body onload="myFunction(document.myForm.mySelect.value)">
<form name="myForm" style="float:left; margin-right: 10px; overflow: hidden;">
<select name="mySelect" onchange="myFunction(this.value)" size="10">
<option value="1" selected="selected">level 1</option>
<option value="2">level 2</option>
<option value="3">level 3</option>
</select>
</form>
<div>
<select id="myDiv" size="10"></select>
</div>
</body>
</html>
qsrcipt.php
<?php
// Fill up array with names
$lsts = array("Anna","Brittany","Cinderella","Diana","Eva","Fiona");
//get the q parameter from URL
$q=$_GET['q'];
if ($q == '1')
{
foreach($lsts as $lst){
echo "<option id='1'>".$lst."</option>";
}
}
else
{
echo "<option id='1'>this is a test</option>";
}
?>
Your $lsts contains the array of names not email.
Secondly, instead generating the HTML server side, it's better to return the values of $lsts as a JSON encoded array and, in JavaScript, dynamically generate the select list.
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);