首次单击后如何禁用搜索按钮，直到结果来自服务器答案

【问题标题】：How to disable search button after first click until results come from server首次单击后如何禁用搜索按钮，直到结果来自服务器
【发布时间】：2016-04-24 21:49:54
【问题描述】：

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

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

【问题讨论】：

您是如何获取结果的？ AJAX ?

标签： javascript jquery html angular-ui-bootstrap

【解决方案1】：

这是如何做到的。首先从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
   },
 });
});

【讨论】：

您实际上不必删除action="action_page.php"，但如果您这样做了，但保留input 和type=submit 表单仍将提交...
被这两者混淆了。所以我在进行 AJAX 调用时从未使用过它们。
如果你在 jQuery 函数中使用 event.preventDefault()，你可以同时保留 action 属性和 input type=submit
@webeno 谢谢。下次我会试试这个:-)。
大家好，我需要更多帮助。

【解决方案2】：

尝试使用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）中使用它一样，提交按钮的选择器可能不是 @ 987654325@（它可能再次成为 AJAX 调用的对象，假设您使用的是 AJAX），因此您将不得不以某种方式将它传递到您的函数中，例如。通过将其定义为变量。

【讨论】：

【解决方案3】：

如果你使用 ajax，你可以设置 onsubmit 事件 ajax readyState 时返回 false

【讨论】：