Question

我是Ajax / jquery的新手。我在页面中有多个表单，可以在没有页面刷新的情况下提交。每次点击提交按钮后，相应的提交按钮都会被禁用到目前为止，我发现脚本通过创建提交按钮ID来禁用按钮。但在这种情况下，我需要多次重复该脚本，就像我在页面中拥有的许多表单一样，并为每个提交按钮提供uncial ID。如何改进按钮禁用代码，而不是一直重复＃saveButton1，＃saveButton2，＃saveButton3 .......

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

Answer 1

您只需要一个DOM就绪处理程序以及使用$('input[type=submit]')而不是input

每个id元素的目标

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

Answer 2

而不是

$('#saveButton2').click

你可以使用

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

Answer 3

您有两个选择

如果要禁用所有提交按钮，可以使用

$(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

});

或特定的提交按钮为他们提供了一个单独的类名称，如sbmtbtn，并禁用此类

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

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

});

Ajax jquery禁用提交按钮onclick

3 个答案: