How to disable a submit button in jQuery?

Question

I want to disable or hide a button using jquery after the form has been submitted. I have tried some solutions but nothing happened.. I have included js file in my page.

Here is my submit button code:

 echo '<td>
           <a href="shortlist.php?vid='.$row["v_id"].'&uid='.$row["userid"].'"">
               <input type="submit" value="short list" id="shortlist" name="shortlist">
           </a>
       </td>';

Here is my jQuery code.....

$('input:submit').click( function() {
    console.log("Form is submiting.....");
    $('input:submit').attr("disabled", true);
});

Answer 1

You should use type attribute.

Basically apart from class and id selectors, CSS2 selectors are also supported by jQuery .

$('input[type=submit]').attr("disabled", true);

[att=val] Match when the element's "att" attribute value is exactly "val".

Reference:

Answer 2

You can create form submit event to achieve that,

$('form').on('submit', function(){
    $("input[type='submit']").attr("disabled", true);
});

And then just set disabled attribute for input with submit type.

Answer 3

You should use the type attribute and need to set the disabled attribute to 'disabled'

$('input[type=submit').click(function(){
    console.log("Form is submiting.....");
    $('input:submit').attr("disabled", "disabled");
});

Answer 4

$('input[type=submit]').prop('disabled', true);

Answer 5

Try this jquery code after click submit button, it will disable.

$('input[type=submit').click(function(e){
            e.preventDefault();
            console.log("Form is submiting.....");
            $('#shortlist').attr("disabled", "disabled");
        });