jqgrid edit forms lose browser auto-fill functionality

Question

I recently posted this question: jqgrid edit form autocomplete="off" by default, how to change to autocomplete="on" because I noticed that by default the jqGrid edit form gave all the input elements the autocomplete="off" attribute. I thought this was the reason why the web browser would not implement the usual auto-fill functionality for the jqGrid edit forms. After fixing this problem and making all the input elements have the autocomplete="on" attribute, still there is no auto-fill for the jqGrid edit forms.

Does anyone know why the auto-fill won't work for these forms? The forms are submitted via ajax, so I am not sure if this is affecting it or not.

Just to be clear, I am not talking about jQuery's autocomplete(). I am talking about a modern web browser's (Chrome, FF) built in form autofill functionality.

For example please go to my jsfiddle example form here. You can fill out the form with anything you want then click submit. Refresh the page and fill it out again. Your browser should have remembered and suggested the values just filled in the first time. This is what happens for me.

On the other hand, if you go to a jqGrid edit example here. Select a row and click the little edit button (looks like a pencil). You can't change the first field, but you can change the other fields. Put whatever you want in the other fields and click submit. Refresh the page a try again. What I am experiencing from many computers and both FF and Chrome is that this form does NOT remember any of the past entries.

This is the problem, are you experiencing the same thing? If so, do you know if it is possible to make these jqGrid forms compatible with the browser's auto-fill functionality?

Thanks!

Answer 1

While all browsers handle the storage and autocomplete of form fields in slightly different manners, they all rely on the form being submitted in order to store the values of the form fields themselves. As jqGrid handles the forms through AJAX (the update button is a link not a submit button), the forms themselves are never actually submitted, which in turn never allows the browser to store the field values for later use through autocomplete.

One method of forcing the browser to store the field values, is to create an <iframe />, clone the <form />, append the cloned <form /> into the <iframe /> and submit it as part of the AJAX form submission process.

Take for example this modified version of your JSFiddle.

In the above example, fill out the 'Standard Form' and submit, reload the page and the fields are autocompleted as expected. Fill out the 'AJAX Form' and submit, reload the page and the fields are NOT autocompleted. Finally, fill out the 'AJAX + iFrame Form' and submit, reload the page and the fields should now autocomplete.

*Note: The above example was tested on Chrome, Safari and Firefox. Your Milage may vary.

For completeness, here is the relavent code:

$('#iframe_submit').bind('submit', function(e){
    e.preventDefault(); // Prevents Standard Submit

    // Do AJAX Stuff Here...   

    // Create Clone of Form, Append to iFrame and Trigger Submit
    // This Forces Autocomplete to Register

    var $clone = $('#iframe_submit').clone();
        $clone.attr('id', 'iframe_clone'); // Only One ID Allowed

        $('<iframe />').appendTo('body').contents().find('body').append($clone);
        $('iframe').contents().find('#iframe_clone').submit();
    });

I hope this helps!