CODEWITHSUNDEEP
jqueryhtmlformsautocompleteform-submit
DarkAjax
DarkAjax

Reputation: 16223

How to save autocomplete information (locally) for a form without redirecting/refresing the page

I have a form I'm submitting via ajax with jQuery, it's part of a system that'll replace an existing one, there's a functionality problem I'm facing thouhg. On the current system, users fill out all the form's information and submits, normally thought the form's submit button, I've noticed in those cases the autocomplete information for form elements with the same name will be saved locally on the browser (in this case most users will use Google Chrome), however, when trying to submit the form's data through ajax, nothing will be saved. The users will be sometimes imputing repetitive information (but not to the point were it'd be a good idea to have a list on the server to use jQuery autocomplete). My code when clicking the submit button (instead of submitting the normal way) is currently something like this:

jQuery("<submit button>").click(function() {
    <form validation and other stuff>
    jQuery.ajax({
        type: 'POST',
        url: '<some perl script>',
        data: '<form data>',
        success: function(data) {
            if(<expected response from server>){
                if(<certain input on the form has a specific value>){
                    <do something>
                }
            } else {
                <do something else>
            }
    });
})

This is my first question here, and I looked all over trying to find a solution before deciding to post it, if you think I'm not making enough sense, I'll try to include more data.

Basically what I want is to be able to save the information for every form field for future use on with the browser's autocomplete, but I haven't been able to pull it off using ajax. I think there's something that only works for Internet Explorer called window.external.AutoCompleteSaveForm but I'm not sure (anyways this whole system won't be used with explorer).

NOTE: What I want is to save previous entered values on the autocomplete/suggestions or whatever you want to call it, so let's say a user submits the value "Something" for input "name", I want the users to be able to write the letter "S" and the browser's autocomplete to show a list of previously entered values (not displaying anything specific by default) including the "Something" that was entered on a previous submit (and other matching ones like "Something else", "Something Wrong", etc). For what I've tested so far, "submitting" the form with ajax (and returning false to avoid the page to reload) won't save the previous submitted info for future autocomplete use (at least on in Chrome, which is the browser that concerns me).

Upvotes: 1

Views: 2465

Answers (3)

bpeterson76
bpeterson76

Reputation: 12870

[edit] Aye Carumba, this is not at all clear!

Ok, if you're truly submitting via ajax, the form shouldn't actually disappear, hence no need to save anything. Without the form code it's impossible to see what's exactly going on. However, if you have a button or form submit element inside of <form> tags, the form is doing what HTML's default is....submitting the form to the form action. That would cause the form to clear, and likely would be bypassing your ajax action altogether.

Throw an event.preventDefault in your click function. See what happens.....

jQuery("<submit button>").click(function(event) {
event.preventDefault()
<form validation and other stuff>
jQuery.ajax({
    type: 'POST',
    url: '<some perl script>',
    data: '<form data>',
    success: function(data) {
        if(<expected response from server>){
            if(<certain input on the form has a specific value>){
                <do something>
            }
        } else {
            <do something else>
        }
});

})

That would override the form's default functionality, which would be to submit and clear the form. Now, everything should stay put, with no clearing. You could selectively clear elements or leave them all as you wish from there.

Please, please add more detail to your question!

Upvotes: 0

Highway of Life
Highway of Life

Reputation: 24411

If you want to hijack the form submit, it's better to do so using jQuery.submit rather than "click". To prevent the form from actually submitting (since your AJAX is going to do it instead), you should use return false

Example:

jQuery('#form').submit(function() {
    // <form validation and other stuff>
    var $form_data = jQuery(this).serialize();
    jQuery.ajax({
        type: 'POST',
        url: '<some perl script>',
        data: $form_data,
        success: function(data) {
            if(<expected response from server>){
                if(<certain input on the form has a specific value>){
                    <do something>
                }
            } else {
                <do something else>
            }
    });

    return false;
})

Upvotes: 0

SoWhat
SoWhat

Reputation: 5622

you don't actually mention the question. I am going out on a limb here, but you want the browser to save the form data when the user submits it. I am guessing these are some sort of form queries.

I think most modern browsers support auto complete when an XHR is made, I maybe wrong. In any case, you could submit the data via an iframe and trick the browser into beleiving that the page has changed

Upvotes: 1

Related Questions