All you want to do is dynamically change content of a div So using AJAX is the whole Idea,
I'm trying to understand what you want to do.
Maybe this will point you into the right direction, below is a GET and POST example.
From a different thread you asked about GET and POST.
GET and POST transfer variables from one page to another (They both serve the same purpose and are simply 2 different methods of doing it) I'm sure you already got that.
Below there are 2 forms and each have a text box, when typing in them and upon the up key it calls its respective java script which then gets data from another PHP file
NOTE!: Its not actually getting a PHP variable as such it gets it as returned data to HTML so its getting text displayed by the web server. (Hope I'm not confusing you)
and the second one does the same but uses POST, the below looks like allot of code but its actually quite simple. if you follow it.
Then when you press the the submit button it will GET and POST to another page called registration.
I made the below example directly googling "PHP AJAX EXAMPLE" and the first hit was
http://www.w3schools.com/php/php_ajax_php.asp
Copy and paste the code into the root of a test directory using wamp or what ever and give it a go.
index.php
PHP:
<!DOCTYPE html>
<html>
<head>
<script>
//GET EXAMPLE check username
function CheckUserName(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "checkinput.php?VAR1="+str, true);
xmlhttp.send();
}
}
//GET EXAMPLE Check Passowrd
function CheckPassowrd(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "checkinput.php?VAR2="+str, true);
xmlhttp.send();
}
}
//POST EXAMPLE check username
function CheckUserNamewithPOST(str) {
if (str.length == 0) {
document.getElementById("txtHintPOST").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHintPOST").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "checkinput.php?VAR3="+str, true);
xmlhttp.send();
}
}
//POST EXAMPLE Check Passowrd
function CheckPassowrdwithPOST(str) {
if (str.length == 0) {
document.getElementById("txtHintPOST").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHintPOST").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "checkinput.php?VAR4="+str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<h3>GET Example</h3>
<form action="registration.php" method="GET">
Email Address<br>
<input type="text" name="VAR1" onkeyup="CheckUserName(this.value)"><bf>
Email address must contain an @ sign.<br><br>
Password<br><input type="text" name="VAR2" onkeyup="CheckPassowrd(this.value)"> Password fields must contain an ! sign.<br><br>
<input type="submit" value="SEND NOW">
</form>
<p>Notification: <span id="txtHint"></span></p>
<br><br>
<h3>POST Example</h3>
<form action="registration.php" method="POST">
Email Address<br>
<input type="text" name="VAR3" onkeyup="CheckUserNamewithPOST(this.value)"><bf>
Email address must contain an @ sign.<br><br>
Password<br><input type="text" name="VAR4" onkeyup="CheckPassowrdwithPOST(this.value)"> Password fields must contain an ! sign.<br><br>
<input type="submit" value="SEND NOW">
</form>
<p>Notification: <span id="txtHintPOST"></span></p>
</body>
</html>
checkinput.php
PHP:
<?php
if(!empty($_GET["VAR1"])){$VAR1=$_GET["VAR1"];}else{$VAR1='';}
if(!empty($_GET["VAR2"])){$VAR2=$_GET["VAR2"];}else{$VAR2='';}
if(!empty($_GET["VAR3"])){$VAR3=$_GET["VAR3"];}else{$VAR3='';}
if(!empty($_GET["VAR4"])){$VAR4=$_GET["VAR4"];}else{$VAR4='';}
if($VAR1<>''){echo CallCheckUserforExclamation($VAR1);}
if($VAR2<>''){echo CallCheckPassforAt($VAR2);}
if($VAR3<>''){echo CallCheckUserforExclamationWITHPOST($VAR3);}
if($VAR4<>''){echo CallCheckPassforAtWITHPOST($VAR4);}
//GET EXAMPLE check username
function CallCheckUserforExclamation($VAR1)
{
if (strpos($VAR1, '@') !== false) {echo '<font color="green">Email address is valid (USING GET)</font>';}else{return '<font color="red">Email not valid and must contain an @ sign (USING GET)</font>';}
}
//GET EXAMPLE Check Passowrd
function CallCheckPassforAt($VAR2)
{
if (strpos($VAR2, '!') !== false) {echo '<font color="green">Passowrd is strong (USING GET)</font>';}else{return '<font color="red">Password not strong enough and must contain an ! (USING GET)</font>';}
}
//POST EXAMPLE check username
function CallCheckUserforExclamationWITHPOST($VAR3)
{
if (strpos($VAR3, '@') !== false) {echo '<font color="green">Email address is valid (USING POST)</font>';}else{return '<font color="red">Email not valid and must contain an @ sign (USING POST) </font>';}
}
//POST EXAMPLE Check Passowrd
function CallCheckPassforAtWITHPOST($VAR4)
{
if (strpos($VAR4, '!') !== false) {echo '<font color="green">Passowrd is strong(USING POST)</font>';}else{return '<font color="red">Password not strong enough and must contain an !(USING POST)</font>';}
}
?>
registration.php (Optional)
PHP:
<?php
if(!empty($_GET["VAR1"])){$VAR1=$_GET["VAR1"];}else{$VAR1='';}
if(!empty($_GET["VAR2"])){$VAR2=$_GET["VAR2"];}else{$VAR2='';}
if(!empty($_POST["VAR3"])){$VAR3=$_POST["VAR3"];}else{$VAR3='';}
if(!empty($_POST["VAR4"])){$VAR4=$_POST["VAR4"];}else{$VAR4='';}
echo $VAR1 . '<br>';
echo $VAR2 . '<br>';
echo $VAR3 . '<br>';
echo $VAR4 . '<br>';
?>
<br><br>
<a href="index.php">GO BACK</a>
Sign up with Google
