Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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....
}
like image 875
VIDesignz Avatar asked Nov 27 '12 13:11

VIDesignz


People also ask

What is the difference between AJAX and form submit?

A standard form submit sends a new HTTP request (POST or GET) and loads the new page in the browser. In Ajax, the data is sent to the server (POST or GET) in the background, without affecting the page at all, and the response is then received by javascript in the background, again without affecting the page at all.

Should I use AJAX for forms?

use AJAX submission when: form submits 'to itself' (we show the same form after submission) form is only a part of a larger view (such as a search form where search results may be dynamically added to an area on the page, such as a table or thumbnail grid)

What is AJAX form submission?

AJAX form submitting allows you to send data in the background, eliminating the need to reload websites to see the updates. This makes the user experience much smoother.

How avoid Enter key submit in PHP?

$(document). on('keyup keypress', 'form input[type="text"]', function(e) { if(e. keyCode == 13) { e. preventDefault(); return false; } });


1 Answers

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.

like image 99
slashingweapon Avatar answered Sep 22 '22 03:09

slashingweapon