Prevent changes after async form submission?

Question

So I have a function called submitEdit():

function submitEdit() {
    //var ffield = document.getElementById("form_eline");
    //ffield.submit();
    jQuery('#edit_line').css('visibility', 'hidden');

    var fieldName = jQuery('#form_eline input[name=efield]').val();
    var pageId = jQuery('#form_eline input[name=eid]').val();
    var fieldText = jQuery('#ve'+fieldName+'_'+pageId);
    var editBtn = fieldText.prev();
    var loading = document.createElement("img");
    loading.src = 'http://www.lookall.tv/html/res/img/loading.gif';
    loading.id = "loading";
    loading.width = 16;
    loading.height = 16;

    jQuery('#form_eline').ajaxSubmit({
        beforeSubmit: function() {
            editBtn.hide();
            fieldText.prepend(loading);
        },
        error: function(data) {
            jQuery('#edit_line').css('visibility', 'visible');
        },
        success: function(response) {
            fieldText.text(jQuery('#form_eline :text').fieldValue()[0]);
            editBtn.show();
            jQuery('img#loading').remove();

            return true;
        }
    });
}

Sadly this isn't my work and I'm building on an already existing website. So the problem is that the server is slow to respond. Therefor in those few seconds it takes the server to send a response someone could edit another field thus overwriting the current values. Is there some way to instantiate the variables so they don't overwrite?

Why don't you disable text fields while server is sending response? — craftsman, Feb 01 '12 at 07:33
The values of the variables won't be overwritten. Only the values of the fields will change. One your request is airborne, nothing the user can do will affect the request payload -- apart from closing the window. — Ates Goral, Feb 01 '12 at 07:37
Or even better: `$('#form_eline').find('input, select, textarea').attr('readonly', true)` put it in your `beforeSubmit` — dfsq, Feb 01 '12 at 07:37
@dfsq Or even better: `$("#form_eline :input").attr("disabled", "disabled");` — Ates Goral, Feb 01 '12 at 07:49
@AtesGoral. Or even better: `$('#form_eline input, select, textarea').prop('disabled', true);` I think it's the best so far... — gdoron, Feb 01 '12 at 08:29
@gdoron `:input` is a relatively new pseudo-selector in jQuery and it refers to input, select and textarea. — Ates Goral, Feb 01 '12 at 08:36
@AtesGoral. Read the note on the top of the [docs](http://api.jquery.com/input-selector/). — gdoron, Feb 01 '12 at 08:38
@gdoron The one about performance? Who cares about performance in this particular case? — Ates Goral, Feb 01 '12 at 08:41
@AtesGoral. _am not I am_ cares... [here](http://stackoverflow.com/q/9084244/601179) **lol** — gdoron, Feb 01 '12 at 08:47
@gdoron You're confusing just disabling a bunch of elements with attaching event handlers to them. — Ates Goral, Feb 01 '12 at 08:50

gdoron · Accepted Answer · 2012-02-06T05:45:51.700

The variables won't be affected if the user will change the values of the HTML elements.

If you want the user to know the changes he will do won't affect because the request ha been sent already. just disable the elements.

beforeSubmit: function() {
            editBtn.hide();
            fieldText.prepend(loading);
            $('#form_eline input, select, textarea').prop('disabled', true);
        },
complete: function (){
            editBtn.show();
            $('#form_eline input, select, textarea').prop('disabled', false);
        }

Prevent changes after async form submission?

1 Answers1

Linked