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.

Answer 1

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 = $("");
        $('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;
}