I am trying to submit a change of password using AJAX and POST
Normally I can make it work fine, and if the change of password is complete and error free, it returns just a blank white page (This is without Ajax) I am trying to make the entire change of password, happen in a small div, which will then update with the response (either successfuly or not successful)
I have cut much of the code down so I can eliminate possible issues:
<div id="s-window">
<form id="changepassword" action="changePassword.php" method="POST">
<input type="password" name="currentPassword" placeholder="Current Password"/>
<input type="password" name="newPassword" placeholder="New Password"/>
<input type="password" name="confirmPassword" placeholder="Confirm Password"/>
<input class="button" type="submit" value="Change Password" />
</form>
</div>
changePassword.php:
<?php
include('config.php');
$currentPassword = ($_POST['currentPassword']);
$password = ($_POST['newPassword']);
$password2 = ($_POST['confirmPassword']);
$username = ($_SESSION['username']);
if ($password <> $password2)
{
echo "Your passwords do not match.";
}
else if ($password === $password2)
{
$hashed_password = password_hash($password, PASSWORD_DEFAULT);
$sql = "UPDATE Staff SET password='$hashed_password' WHERE username='$username'";
mysql_query($sql) or die( mysql_error());
}
else
{
mysqli_error($con);
}
mysqli_close($con);
?>
I know the MySQL stuff is messy - it's something I am going to work on.
$(".button").click(function() {
$.ajax({
url: "changePassword.php",
type: "POST",
dataType: "html",
success: function(html){ // this happens after we get results
$("#s-window").append(html);
}
});
};
I have no experience with jQuery and my googling has not yielded any sufficiently similar results that I could build from.
The reason you get a blank white page is because the form element submit event is still firing after the button has been clicked. To prevent this, a better pattern to use is to hook your code to that submit event instead of the button click. Try this:
$("#changepassword").submit(function(e) {
e.preventDefault(); // stop normal form submission
$.ajax({
url: "changePassword.php",
type: "POST",
data: $(this).serialize(), // you also need to send the form data
dataType: "html",
success: function(html) {
$("#s-window").append(html);
}
});
});
Note that your PHP code only returns a string value when there is a mis-match in the provided passwords. You may wish to change that behaviour so that the end user knows when the action has been completed successfully too.
with the result in the changepassword.php page then echo the output as "updated" or "notupdated" in one variable
in response you can add a check with the resp in the success function lke this
if(resp=='updated')
{
alert('password has been updated');
}
if(resp=='notupdated')
{
alert('password not updated,plz try again');
}
hope this helps...
There are few issues. 1. you need to change button type submit to button. Because button type submit always submit you form. 2. Javascript code will be as :
$(".button").click(function(){
var str = $( "#changepassword" ).serialize();
$.ajax({
url: "changePassword.php",
type: "POST",
dataType: "html",
data: str,
success: function(html){ // this happens after we get results
$("#s-window").append(html);
}
}); })