browser autocomplete/saved form not work in ajax request browser autocomplete/saved form not work in ajax request ajax ajax

browser autocomplete/saved form not work in ajax request


I'm having the same problem. I was able to solve it for FireFox by adding a hidden iframe that I submit via JavaScript before doing my AJAX post. I still haven't found anything that works in Chrome/IE.


I've been faced with same issue and searched a bit. I think the solution below is the most convenient way to solve this if you have a login page. If we consider the login submitted via ajax, none of the browsers remember or offer autocomplate feature for user name and password field additionally ask to remember the credentials. But if you use the javascript submit feature (Probably it's not compatible with older versions of browsers), All of the browsers offers to save the username and password except IE. But I've found another javascript tricky for IE to make it offer to save username and password.

In my login page, I've handled the username and password and send them to serverside by ajax request and if the login is succeeded, i submitted the form by the method below otherwise It had been shown an Alert box to the user that the login was failed.

Please Check the link below:

[EDIT]: Link is broken

There is a fixed page about this issue in the page linked, i can not give you another link because of my reputation. Please search for the quotation below in the page:

Look at the fixed page.

Of course,this approach does not fit if you have a login section in the default page because of the form submitting. This causes the page flickering. I wonder if someone has an idea about it?


Here is some unobstrusive js jQuery code that will submit a form both via ajax ($.post method) to a real backend script and also to a dummy script via an iFrame, so the browser will save the submitted data for subsequent autocompletion.

This is working great under chrome. Any feedback is more than welcome!

var  formframesindex = 0;function onSubmitAjax(evt){    var $form = $(this);    var framesubmitting = $form.hasClass('framesubmitting');    var action = $form.attr('action');    var original_action = action;    if(!framesubmitting){        $.post(action,$form.serialize()+"&ajax=1", function(responseText,message,request){            formResponseHandler(responseText);        }, "json");        formframesindex++;        var formframe = $("<iframe name='formframe_id_"+(formframesindex)+"' id='formframe_id_"+(formframesindex)+"' class='formframe' src='/fakeformreceiver.php'></iframe>");        $('body').append(formframe);        var target = $form.attr('target');        $form.data('originaltarget',target);        $form.data('originalaction',original_action);        $form.attr('target','formframe_id_'+formframesindex);        $form.attr('action','/fakeformreceiver.php');        $form.addClass('framesubmitting');        $form.submit();    } else {        var current_target = $form.attr('target');        var original_action = $form.data('originalaction');        var original_target = $form.data('originaltarget');        var $frame = $('#'+current_target);        setTimeout(function(){            if($frame && $frame.length){                $frame.remove();            }            $form.attr('action',original_action);            $form.attr('target',original_target);            $form.removeClass('framesubmitting');        },100);    }    return framesubmitting;}