Ajax jquery disable submit button onclick

StackOverflow https://stackoverflow.com/questions/22473929

  •  16-06-2023
  •  | 
  •  

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>
Was it helpful?

Solution 2

Instead of 

$('#saveButton2').click

you could use

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

OTHER TIPS

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');
    });
});

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);

});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top