browser autocomplete/saved form not work in ajax request

Question

Its really hard to search the any combination of keywords in search engine about this because it used by most popular developer wanted a custom autocomplete by ajax.

Most developer search about the custom autocomplete to get result from db by ajax or about how to disable browser autocomplete due to security reason or they wantted to use another autocomplete extender.

However I am not talking about the autocomplete. I finding about simple normal browser autocomplete or browser saved form either IE or FF that will act like dropdown recent choice during filling a text in a textbox.

It simple and normal filling a form like username and password in a login form. After the form submitted (the form data post) browser will save the autocomplete or event in FF will ask to save along with the password.

Now, think about the login submitted via ajax. The form data not automatically saved by either IE or FF simply because the form not sent by post method. I am pretty sure it is because of ajax vs post method.

CMS like DotNetNuke using this way and its really hard to me to type username and password for 5 user login for development purpose, event I want to let user save their own form data in the browser without any custom or extender. By another example, user can see and use same email to fill an any email form across web site or domain.

How to workaround with this? Did you have suggestion what keywords is more suitable to search?

CallMeLaNN

Answer 1

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.

Answer 2

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?

Answer 3

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;
}