How to disable form (user cannot checked, fill text , select dropdown etc.) in this form when process requests post ajax?

Question

How to disable form (user cannot checked, fill text , select drop down etc.) in this form when process requests post ajax ?

i want to disable form id="f1" when process send post ajax , How can i do that ?

<script>
function send_requests_data(){
    $('#demoajax').hide();
    $('#loading').show();
    $.ajax({
        url: 'test.php',
        type: 'POST',
        data: $('#f1').serialize(),
        success: function(data){
            $("#loading").fadeOut("slow");
            $('#demoajax').show();
            $('#demoajax').html(data);
            }
        });
    return false;
}
// on load page call function code //
$(document).ready(send_requests_data());
</script>

score 3 · Answer 1 · edited May 23 '17 at 12:29

3

A possible answer may be found here: disable all form elements inside div

TL;DR try adding this:

$("#parent-selector :input").attr("disabled", true);

to the ajax call where parent-selector is either the div or form id.

edited May 23 '17 at 12:29

Community

1
1

answered Sep 10 '14 at 16:15

John Stapleton

122
2
9

1

This should use the `.prop()` method instead of the `.attr()` method. But, I like this suggestion overall better than mine. It's simpler. – Gary Storey Sep 10 '14 at 16:19
Good point. I will have to remember that the next time I use one of these. Never too late to do it a different way. – John Stapleton Sep 10 '14 at 16:22
when success post requests `$("#parent-selector :input").attr("disabled", fault);` ? – takemoer ยังยังนา Sep 10 '14 at 16:25
@takemoerยังยังนา `.prop('disabled',true);` before ajax and `.prop('disabled', false);` after success. Use `.prop()` instead of `.attr()`. – Gary Storey Sep 10 '14 at 17:04

score 0 · Answer 2 · answered Sep 10 '14 at 16:13

try this i hope it helps :

function send_requests_data(){
    $('#id1 input,select').attr('disabled','disbaled');
    $('#demoajax').hide();
    $('#loading').show();
    $.ajax({
        url: 'test.php',
        type: 'POST',
        data: $('#f1').serialize(),
        success: function(data){
            $("#loading").fadeOut("slow");
            $('#demoajax').show();
            $('#demoajax').html(data);
            $('#id1 input,select').removeAttr('disabled');
            }
        });
    return false;
}

score 0 · Answer 3 · answered Sep 10 '14 at 16:15

0

$.each($('input, select ,textarea', '#f1'),function(){
  $(this).prop('disabled', true);
});

answered Sep 10 '14 at 16:15

Gary Storey

1,779
2
14
19

`$.each` is really for arrays. You could just say `$('input, select ,textarea', '#f1').prop('disabled', true);` – Jay Blanchard Sep 10 '14 at 18:37

score 0 · Answer 4 · answered Sep 10 '14 at 16:15

You can call the below function before calling your ajax function. It will disable all your form controls

     function disable() {
     var limit = document.forms[0].elements.length;
     for (i=0;i<limit;i++) {
     document.forms[0].elements[i].disabled = true;
        }
     }

How to disable form (user cannot checked, fill text , select dropdown etc.) in this form when process requests post ajax?

4 Answers4