Standard Form Submit vs Ajax Form Submit - Browser Auto Save/Suggest User Input

ajax, forms, jquery, submit

Solution

When any button of type submit is clicked, the enclosing form is submitted. You can choose to handle the submit event instead of the button's click event. Here is an example:

$('#demoForm').submit(function(evt) {
    evt.preventDefault();
    var data = $(this).serialize();
    alert(data);
});​

There's a Fiddle for you, too.

By catching the later event, you'll ensure that at least some browsers have a chance to store the form data for future auto-fills.

Problem

Most of us that use forms combined with ajax probably noticed that the input submitted by the user is not saved/suggested by the browser in later sessions. This is a downfall when it comes to 'sign in' pages. The browser usually offers to save the username/password, which is very handy, yet with an ajax form submit ....well, you know, this just doesn't happen. I've seen this question twice on here and still no answers. Its been about 9 months since it was asked, and I know there is a lot of smart people around here. So....I have decided to resurrect this question. What can we do to resolve this? Can we trick the browser somehow? I am willing to work back and forth on this since I know it would be nice to have a working solution for all of us to use. Final Solution based off the answer from slashingweapon (Thanks Man!) HTML - Using a custom button to submit, along with no form 'action' or 'method', only ajax ``` <form id="signin"> <label for="username">Username</label> <input type="text" id="username" name="username" /> <label for="password">Password</label> <input type="password" id="password" name="password" /> //Custom Styled Submit Button <img id="submit" class="form_button" src="btn_txt_sign_in.png" alt="Sign In" tabindex="3" /> //Hidden Standard Form Submit Button <input id='trigger' type='submit' style='display:none;' /> </form> ``` JQuery ``` // Bind a click to the Custom Submit Button $('#submit').click( function() { //Trigger a Click on the Hidden Standard Form Submit $('#trigger').click(); }); // Detect when the form attempts to be submitted $('#signin').submit( function(e){ // Prevent Standard Form Submission e.preventDefault(); // Perform Function containing Ajax Submission instead submit_signin(); }); // Ajax Submission function submit_signin() { //My Ajax Call.... } ```

Original source