I'm trying to make a user registration form using AJAX, I'm fairly new to this so I don't have much experience in what I'm doing. My problem is not getting the php to work or the AJAX to send off the file it's the that responseText has no value when it comes back. I want it so that the responseText will be the PHP echo's. I think I'm along the right lines of what to do maybe? Help please. Also sorry for bad layout of the question, I'll tidy it up soon.
HTML:
<div id="registration">
<form method="post" action="" onsubmit="formValidate()">
<!-- Apply Javascript for form validation and change password property -->
<div id="title">First Name:</div>
<input type="text" name="firstname" id="firstname" value="First Name"/>
<div id="title">Surname:</div>
<input type="text" name="surname" id="surname" value="Surname"/>
<div id="title">Address:</div>
<input type="text" name="address" id="address" value="Address Line 1"/>
<input type="text" id="town_city" name="town_city" value="Town/City"/>
<input type="text" name="postcode" id="postcode" value="Postcode" />
<input type="text" name="country" id="country" value="Country" />
<div id="title">Email:</div>
<input type="text" name="email" id="email" value="Email" />
<div id="title">Password:</div>
<input type="text" name="password" id="password" value="Password" />
<div id="title">Verify Password:</div>
<input type="text" name="vPassword" id="vPassword" value="Passwloord" />
<div id="status"></div>
<input type="submit" name="submit" value="Register" />
</form>
</div>
JS:
function formValidate() {
if (window.XMLHttpRequest) {
xml = new XMLHttpRequest();
} else {
xml = new ActiveXObject('Microsoft.XMLHTTP');
}
var url = 'php/validateUser.inc.php';
var fn = document.getElementById('firstname').value;
var ln = document.getElementById('surname').value;
var add = document.getElementById('address').value;
var tc = document.getElementById('town_city').value;
var pCode = document.getElementById('postcode').value;
var country = document.getElementById('country').value;
var email = document.getElementById('email').value;
var pass = document.getElementById('password').value;
var vPass = document.getElementById('vPassword').value;
var userInput = "firstname=" + fn + "&surname=" + ln + "&address=" + add + "&town_city=" + tc + "&postcode=" + pCode + "&country" + country + "&email=" + email + "&password=" + pass + "&vPassword=" + vPass;
xml.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xml.open('POST', url, true);
xml.onreadystatechange = function() {
if (xml.readyState == 4) {
if (xml.status == 200) {
var return_data = xml.responseText;
document.getElementById("status").innerHTML = return_data;
} else {
alert("GNAH!");
}
}
xml.send(userInput);
document.getElementById("status").innerHTML = "Processing....";
}
After I done this part I want the echo's of the PHP to appear in the status div but they appear in the left hand corner of the screen, yet the "Processing...." doesn't. Any suggestions please I know this is the file that's wrong.
PHP:
<?php
if (isset($_POST['submit'])) {
if (isset($_POST['firstname'], $_POST['surname'], $_POST['address'], $_POST['town_city'], $_POST['postcode'], $_POST['country'], $_POST['email'], $_POST['password'], $_POST['vPassword'])) {
$fName = mysql_real_escape_string($_POST['firstname']);
$lName = mysql_real_escape_string($_POST['surname']);
$addr = mysql_real_escape_string($_POST['address']);
$town_city = mysql_real_escape_string($_POST['town_city']);
$pCode = mysql_real_escape_string($_POST['postcode']);
$country = mysql_real_escape_string($_POST['country']);
$email = mysql_real_escape_string($_POST['email']);
$pass = mysql_real_escape_string($_POST['password']);
$pass_hash = md5($pass);
$vPass = mysql_real_escape_string($_POST['vPassword']);
if (!empty($fName) && !empty($lName) && !empty($addr) && !empty($town_city) && !empty($pCode) && !empty($country) && !empty($email) && !empty($pass) && !empty($vPass) && $pass == $vPass) {
$query = "INSERT INTO `usertable` (user_id, fName, lName, Address, town_city, pCode, Country, Email, Password) VALUES ('', '$fName', '$lName', '$addr', '$town_city', '$pCode', '$country', '$email', '$pass')";
$query_run = mysql_query($query);
if ($query_run) {
header('Location: login.php');
} else {
echo mysql_error();
}
} else {
echo 'Please fill in all fiels and make sure both passwords match.';
}
} else {
echo mysql_error();
}
}
?>
You aren't supplying a value for the "submit" form field in your userInput
variable, so the test:
if ($_POST['submit'])
fails. Change the assignment to:
var userInput = "submit=Register&firstname="+fn+...