CODEWITHSUNDEEP
jqueryjquery-validate
user974435
user974435

Reputation: 397

Disable submit button with submitHandler

I am trying to stop a submit button to be clicked multiple times and upload the same item multiple times to MySQL.

Because the validation doesn't work, I can not press the button submit button at all. Which means I can't test the code.

I am running related post as well here, to give you some more information.

What I've got so far, using jQuery validation:

$("#UploadForm").validate({

errorLabelContainer: "#messageBox",
        wrapper: "td",
        rules: {
            auction_description: {
                required: true
            },
            auction_int_postage_type: {
                required: true
            },
            listing_type: {
                required: true
            }
        }

   //all your options here

   submitHandler:function(form){
       $('#submit').attr('disabled','disabled');
   }
});

HTML

 <form method="post" name="UploadForm" id="UploadForm"
 action="upload.php" enctype="multipart/form-data" >
 
 
 <input style="text-transform:none;"  type="text" class="button_date" 
 name="auction_bin_price" id="auction_bin_price" value="" size="15" />
 
 <input class="button2" style="border-right:none; font-size:13px;"
 name="List Item" id="submit" type="submit" value="List Item"/>
 
 </form>

Upvotes: 0

Views: 4361

Answers (1)

Optimus Prime
Optimus Prime

Reputation: 6907

Here is a fiddle that has a working demo of solution to your problem.

jQuery 1.6+

To change the disabled property you should use the .prop() function.

$("#submit").prop('disabled', true);
$("#submit").prop('disabled', false);

jQuery 1.5 and below

The .prop() function doesn't exist, but .attr() does similar:

Set the disabled attribute.

$("#submit").attr('disabled','disabled');

To enable again

$("#submit").removeAttr('disabled');

In any version of jQuery

You can always rely on the actual DOM object and is probably a little faster than the other two options if you are only dealing with one element:

// assuming an event handler thus 'this'
this.disabled = true;

The advantage to using the .prop() or .attr() methods is that you can set the property for a bunch of selected items.

Upvotes: 3

Related Questions