Question

＆＃13;

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

＆＃13;

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

Answer 1

尝试使用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），所以你必须以某种方式将它传递给你的函数，例如。通过将其定义为变量。

Answer 2

如果您使用的是ajax，则可以使用on设置onsubmit事件在ajax readyState＆lt; 4

时返回false

Answer 3

以下是如何做到的。首先从action="action_page.php"代码中删除form，因为它会调用我们不想要的表单提交方法。

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

这是原型代码。

$('#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
   },
 });
});

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

3 个答案: