CODEWITHSUNDEEP
javascriptphpjqueryajaxforms
d3wannabe
d3wannabe

Reputation: 1317

Getting an Ajax response from a form.submit() to PHP

I'm trying to combine a form.submit() call with a jquery/ajax call to get a response from my php login script - I've just spent a few hours trying to hack together some of the hundreds of posts/examples on a similar topic but am out of ideas now so am hoping someone can help.

My sign in form looks like this...

<form id ="signInForm" action= "/userManagement/proxy_process_login.php" method="post" name="login_form"> 

<input required id="signInUserId" name="email" type="text" placeholder="Username/Email" class="input-medium">
<input required id="signInPassword" name="password" type="password" placeholder="Password" class="input-medium">
<button id="signin" name="signin" class="btn btn-success" onclick="signInSubmit(this.form, this.form.signInPassword);">Sign In</button>

</form>

The function signInSubmit() (called by the button's onclick) simply validates the text fields, and replaces the plain text password with a hashed version before finally calling "form.submit()", like this...

//ommited a bunch of text input validation
var p = document.createElement("input");
form.appendChild(p);
p.name = "p";
p.type = "hidden";
p.value = hex_sha512(password.value);
password.value = ""; // Make sure the plaintext password doesn't get sent. 
form.submit();

My PHP script (proxy_process_login) also works fine before adding any jquery/ajax and essentially does this...

if (login($email, $password, $mysqli) == true) {
        // Login success (ok to reload existing page) 
        header("Location: ../index.php?login=success");
        exit();
 } else {
        // Login failed (do NOT want to reload page - just message "fail" back via AJAX so I can update page accordingly)
        echo "fail";
        exit();
 }

But given the route I'm taking to submit the form, I'm struggling to incorporate an Ajax example - because I've got this new "form" variable (with the hashed p variable appended), so I can't use an Ajax call which refers back to the form using jquery like this...

 $.ajax({type:'POST', url: '/userManagement/proxy_process_login.php', data:$('#signInForm').serialize(), success: function(response) {
       console.log(response);
}});

(because the jquery reference doesn't include the new variable, and I've already specified the php script in the action attribute of my form)

And I also can't call something like "serialize()" on my "form" variable inside signInSubmit().

Any ideas on an appropriate way to structure a solution to this?! Thanks!

Upvotes: 0

Views: 1794

Answers (1)

ProllyGeek
ProllyGeek

Reputation: 15856

Unfortunately there is no callback for native form submission using action attribute , it was used in the past to redirect you to that page and show the results there.

Modern method now is to use ajax call , after perventingthe default submission.

Solution:

HTML:

<form id="myForm">
<!-- form body here --!>
</form>

Javascript:

$("#myForm").submit(function(e){
e.preventDefault();//prevent default submission event.
//validate your form.
//disable your form for preventing duplicate submissions.
//call you ajax here.
//upon ajax success reset your form , show user a success message.
//upon failure you can keep your fields filled , show user error message.

})

this is a typical algorithm i use in any project i do , i recommend using parsley JS for front-end validation.

Upvotes: 3

Related Questions