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

Question

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!

are you both submitting the form and making the ajax call? you should be doing either one or the other. — danyamachine
– danyamachine, Commented Oct 9, 2015 at 17:57
I'm struggling to combine my amended form (stored in a variable and including a hashed password) into an ajax call - I know I can't submit via both approaches. Danyamachine, what part of my JS? I haven't really got anything solid on the jquery/ajax side because I can't get my around the appropriate way to solve the problem. — d3wannabe
– d3wannabe, Commented Oct 9, 2015 at 18:10
this works. without seeing that code that you've tried, and error logs, console outputs, I can't know what it is about your attempt that did not work. — danyamachine
– danyamachine, Commented Oct 9, 2015 at 19:15

ProllyGeek · Accepted Answer · 2015-10-09 18:07:47Z

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.

i think that the specifc problem the poster is having regards adding a form field on submission and then sending the value of that new form field w/ the ajax post.
@danyamachine i havent given a specific solution for user issue rather than a generic algorithm of form submission , the title of the question explains well what the user needs , however if the user finds this answer not clear ,he/she might post a comment for further clarification.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related