CODEWITHSUNDEEP
javascriptjqueryajax
Rick A.
Rick A.

Reputation: 213

Ajax disable the form fields

I use the following Ajax script to post data and to disable the send-button and the form fields. At the moment only the submit button disables on click, but I want all the fields to be disabled.

So that's why I added: var compl_form = $('form#updateBeschikbaarheid'); and compl_form.attr("disabled", "disabled");

But that won't work.

<script type="text/javascript">
$(document).ready(function(){
    $("form#updateBeschikbaarheid").submit(function(event) {
        event.preventDefault();
        var formData = $(":input,:hidden").serialize();
        var btnSubmit = $('#uploadenFormSend'); 
        var compl_form = $('form#updateBeschikbaarheid');
        $.ajax({
            type: "POST",
            url: "beschikbaarheid.insert.php",
            data: formData,
            success: function(result){ /* GET THE TO BE RETURNED DATA */
                $("#resultaat").html(result); /* THE RETURNED DATA WILL BE SHOWN IN THIS DIV */      
                btnSubmit.val("Wacht op goedkeuring"); // put your normal text
                btnSubmit.attr("disabled", "disabled");
                compl_form.attr("disabled", "disabled");
            }
        });
    });
});
</script>

Form:

<form method="post" id="updateBeschikbaarheid" name="updateBeschikbaarheid">
    <input type="time" name="zaterdag_van" id="zaterdag_van" value="">  
    <input type="time" name="zaterdag_tot" id="zaterdag_tot" value="">
    <input type="submit" class="button-pink" value="<?php echo $button_text; ?>" id="uploadenFormSend" name="uploadenFormSend">
</form>

Upvotes: 0

Views: 399

Answers (2)

Jay Blanchard
Jay Blanchard

Reputation: 34416

You cannot disable a form like that, but you can disable the inputs:

$(':input').prop('disabled', true);

Or in older versions of jQuery 

$(':input').attr('disabled', 'disabled');

.prop() .attr()

EDIT: based on your question in the comments, you can leave a select box enabled like this:

$(':input').not('select').attr('disabled', 'disabled');

Upvotes: 3

Kiran
Kiran

Reputation: 21

compl_form.prop("disabled", true);

try this.

Upvotes: 0

Related Questions