I would like to know what is wrong with my code, it's a very simple ajax call to a php script, but the text in the php script won't get passed on to the html page. What is wrong?
<html>
<script>
function checkForm() {
var pass = document.getElementById("oldpassword").value;
var pass1 = document.getElementById("passwordnew1").value;
var pass2 = document.getElementById("passwordnew2").value;
if (pass == '' || pass1 == '' || pass2 == '') {
alert("Fill All Fields");
} else {
var passcheck = document.getElementById("editpassword");
var passcheck1 = document.getElementById("equalpasswords1");
var passcheck2 = document.getElementById("equalpasswords2");
if (passcheck.innerHTML == 'Must be 3+ letters' || passcheck2.innerHTML == 'Password too short' || passcheck3.innerHTML == 'Invalid email') {
alert("Fill Valid Information");
} else {
document.getElementById("myForm").submit();
}
}
}
function validate(field, query) {
var xmlhttp;
if (window.XMLHttpRequest) { // for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState != 4 && xmlhttp.status == 200) {
document.getElementById(field).innerHTML = "Validating..";
} else if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(field).innerHTML = xmlhttp.responseText;
} else {
document.getElementById(field).innerHTML = "Error Occurred. <a href='index.html'>Reload Or Try Again</a> the page.";
}
xmlhttp.open("GET", "validation.php?field=" + field + "&query=" + query, false);
xmlhttp.send();
}
</script>
<body>
<form action="#" id="myForm" name="passwordform" method="post">
<div class="container">
<table>
<tr>
<td style="width:100px"><p><b>My email:</b></td>
<td><p><?php print($email); ?></p></td>
<td></td>
</tr>
<tr>
<td><p><b>My password:</b></td>
<td><p id="editpassword"></p><p id="insertpassword"><input type="password" id="oldpassword" name="inputedPassword" onblur="validate('inputedPassword', this.value)" value="<?php print($password); ?>"/></p></td>
<td></td>
</tr>
<tr>
<td><p><b>My new password:</b></td>
<td><p id="equalpasswords1"></p><input type="password" id="passwordnew1" name="Password1" onblur="validate('Password1', this.value)"/></td>
<td></td>
</tr>
<tr>
<td><p><b>Confirm password:</b></td>
<td><p id="equalpasswords2"></p><input type="password" id="passwordnew2" name="Password2" onblur="validate('Password2', this.value)"/> <input type="button" value="Save" onclick="checkForm()"></td>
<td></td>
</tr>
</table>
</div>
</form>
</body>
</html>
And this is the php code it calls:
<?php
$value = $_GET['query'];
$formfield = $_GET['field'];
if ($formfield == "inputedPassword") {
if (strlen($value) < 4) {
echo "Must be 3+ letters";
} else {
echo "<span>Valid</span>";
}
}
if ($formfield == "Password1") {
if (strlen($value) < 6) {
echo "Password too short";
} else {
echo "<span>Strong</span>";
}
}
if ($formfield == "Password2") {
if (strlen($value) < 6) {
echo "Password too short";
} else {
echo "<span>Strong</span>";
}
}
?>
