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....
}
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.
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)
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.
$(document). on('keyup keypress', 'form input[type="text"]', function(e) { if(e. keyCode == 13) { e. preventDefault(); return false; } });
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With