I don't see any errors in Firebug, and I can't figure out what's wrong with the AJAX.
PHP:
<?php
$subject = $_POST['subject'];
echo $subject;
?>
Javascript
<html>
<head>
<script type="text/javascript">
/* <![CDATA[ */
function ajax() {
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("result_div").value = xmlhttp.responseText;
}
}
xmlhttp.open("POST","message.php",true);
xmlhttp.send();
return false;
}
/* ]]> */
</script>
</head>
<body>
<div id="result_div"></div>
<form action="" onsubmit="return ajax();">
<select name="teest">
<option value="hi">hi</option>
</select><br />
<input type="text" name="subject"> <br />
<input type="submit">
</form>
</body>
</html>
You are not POSTing anything. When using ajax forms are not handled automatically for you.
Related
I want to create error message like this
SPACE Not Allowed Please Try Again
If input is space in firstname and do I need to repeat the ajax for the lastname? It is not conflict while using another action update.php in form html?
<!DOCTYPE html>
<html>
<head>
<script>
function showError(str) {
if (str == "") {
document.getElementById("txtError").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("txtError").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","resident/residenterrormessage.php?g="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form action="update.php" meth="POST">
<div id="txtError">Error Message</div>
<input onchange="showError(this.value)" title="First Name" name="firstname" type="text">
<input title="Last Name" name="lastname" type="text" value="">
<input type="submit" name="submit">
<input>
</form>
</body>
</html>
this is my residenterrormessage.php in folder resident
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/w3.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<?php
$firstname = str_replace(" ", "", $_GET["g"]);
if(empty($firstname) ){
echo '<h1>"SPACE Not Allowed Please Try Again"</h1>';
}
?>
</body>
</html>
Based on your code you are appending an whole page inside the div. So i did some editing in your code. You might wanna try to edit your residenterrormessage.php to this
<?php
if(empty(str_replace(" ","",$_GET["q"]))){
echo '<h1>SPACE Not Allowed Please Try Again</h1>';
}
else
{
echo "a";
}
?>
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;
This ajax test should (by the will of about 2 hours now) return the request result into a textarea. The request is being made to the same page, and I have a $_POST isset test at the top of the body to check whether the request is coming from my POST request (I need to have the code all in one file). The result is that "text to appear in the textarea box" is returned by itself, and isn't placed inside the textarea.
//name of this page is testing.php
<html>
<head>
function loadXMLDoc()
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("testTextarea").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.open("POST","testing.php",true);
xmlhttp.send("test");
}
</head>
<?
if (isset($_POST["testName"])) {
die("text to appear in the textarea box");
}
?>
<body>
<form action="testing.php" method="POST" onsubmit="loadXMLDoc(this.form); return false;">
<input class="command" type="text" name="testName" />
<div><textarea id="testTextarea"></textarea></div>
</body>
</html>
Try moving the die() to the top so that nothing else is outputted before die()
<?
if (isset($_POST["testName"])) {
die("text to appear in the textarea box");
}
?>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("testTextarea").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","testing.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("testName=blah");
}
</script>
</head>
<body>
<form action="testing.php" method="POST" onsubmit="loadXMLDoc(this.form); return false;">
<input class="command" type="text" name="testName" />
<div><textarea id="testTextarea"></textarea></div>
</form>
</body>
</html>
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.
<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.