如何在第一次单击后禁用搜索按钮，直到结果来自服务器

How to disable search button after first click until results come from server

本文关键字：结果 服务器 按钮 搜索 第一次 单击      更新时间：2023-09-26

<form action="action_page.php">
  Search Google:
  <input type="search" name="googlesearch">
  <input type="submit">
</form>

当我第一次在输入字段中输入某些内容，然后单击搜索按钮时，它应该被禁用，但直到相关结果出现并且应该再次启用它。或者其他选择是，在第一次搜索单击后，输入字段应该在相关结果出现后变为空或清晰，当我第二次专注于输入字段以进行第二次搜索时，我可以再次启用该按钮。

这是如何完成的。首先从form标签中删除action="action_page.php"，因为它将调用我们不想要的表单提交方法。

单击搜索按钮时，我们将禁用它，直到我们得到服务器的响应。

这是一个原型代码。

$('#submit-btn').click(function(){
 $('#submit-btn').attr('disabled',true); // Disable button
 $.ajax({
   type: 'POST'
   url: 'action_page.php',
   data: {
      searchWords:$('search-inp').val()
   },
   success: function(data) { // After Success
        doSomethingWithData(data);
        $('#submit-btn').attr('disabled',false); // Enable button
   },
 });
});

尝试使用 event.preventDefault() 来阻止表单的默认行为，添加您喜欢它执行的相关代码，然后确保将回调添加到您的结果获取函数中，该函数使按钮在完成后再次启用（这将取决于您如何执行此操作）。

负责防止的位可能如下所示（与您的原始代码合并）：

$("input[type='submit']").click(function(event) {
    event.preventDefault();
    $(this).attr('disabled', true);
    // do your form posting, then add in its 'success' function the following:
    // $(the_original_submit_button).removeAttr('disabled');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="action_page.php">
  Search Google:
  <input type="search" name="googlesearch">
  <input type="submit">
</form>

注意：the_original_submit_button选择器已被明确命名，就好像你在另一个负责表单发布的函数（例如 AJAX）中使用它一样，提交按钮的选择器可能不会this（它可能会成为 AJAX 调用的对象，再次，假设你使用的是 AJAX），所以你将不得不以某种方式在函数中传递它， 例如。通过将其定义为变量。

如果你使用的是 ajax，你可以使用 在 ajax readyState<4 时返回 false

相关文章：