Ajax jquery disable submit button onclick

Question

I am new in Ajax/ jquery. I have multiple forms in page that can be submitted without page refresh. After every click on submit button corresponding submit button gets disabled.
So far I found script that disables button by founding submit button ID. But in that case I need to repeat that script as many times, as many forms I have in my page and give each submit button uncial ID. How can I improve button disable code, and not repeate #saveButton1, #saveButton2, #saveButton3 ....... all the time?

<script>
$(function () {
$('form').on('submit', function (e) {
    $.ajax({
        type: 'post',
        url: 'post.php',
        data: $(this).serialize(),
        success: function (returnedData ) {
         $( '#message' ).load( 'div.php');

        }
    });
    e.preventDefault();
});
});
</script>




</head>

<body>

<script>
    $(document).ready(function () {
        $('#saveButton1').click(function () {
            $(this).prop("disabled", true);
              $(this).closest('form').trigger('submit');
                   });
    });
</script>

<script>
    $(document).ready(function () {
        $('#saveButton2').click(function () {
            $(this).prop("disabled", true);
             $(this).closest('form').trigger('submit');
                   });
    });
</script>


<form id="form1"  action="" method="post">
Firstname: <input type="text" name="name" /><br><br>
Lastname: <input type="text" name="lastname" /><br><br>

<input id="saveButton1" type="submit" >
</form>



<form id="form2"  action="" method="post">
Firstname: <input type="text" name="name" /><br><br>
Lastname: <input type="text" name="lastname" /><br><br>

<input id="saveButton2" type="submit" >

</form>

<div id='message'></div>




</body>

Felix · Accepted Answer · 2014-03-18 08:33:24Z

2

You just need one DOM ready handler as well as using $('input[type=submit]') instead of target each input element by id

$(document).ready(function () {
    $('input[type=submit]').click(function () {
        $(this).prop("disabled", true);
        $(this).closest('form').trigger('submit');
    });
});

answered Mar 18, 2014 at 8:33

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David · Accepted Answer · 2014-03-18 08:31:43Z

1

Instead of

$('#saveButton2').click

you could use

$('input[type=submit]').click

answered Mar 18, 2014 at 8:31

David

34.6k13 gold badges90 silver badges124 bronze badges

Comments

krishna · Accepted Answer · 2014-03-18 08:43:37Z

1

You have two options

If you want to disable all submit buttons you can use

$(document).on('click', 'input[type=submit]', function(e) {

$(this).prop("disabled", true); // $(this) selects the clicked button and applies the function you implement on it

});

or particular submit buttons give them a seperate class name like sbmtbtn and disable like this

$(document).on('click', 'input[class=sbmtbtn]', function(e) {

$(this).prop("disabled", true);

});

answered Mar 18, 2014 at 8:43

krishna

4,0892 gold badges32 silver badges56 bronze badges

Collectives™ on Stack Overflow

Ajax jquery disable submit button onclick

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related