如何使 HTML 按钮不重新加载页面

Posted 2023-02-22

【中文标题】如何使 HTML 按钮不重新加载页面

【英文标题】：How do I make an HTML button not reload the page

【发布时间】：2010-12-25 02:19:14

【问题描述】：

我有一个按钮 (<input type="submit">)。当它被点击时，页面会重新加载。由于我有一些在页面加载时调用的 jQuery hide() 函数，这会导致这些元素再次被隐藏。如何让按钮什么都不做，这样我仍然可以添加一些在单击按钮时发生的操作，但不会重新加载页面。

【参考方案1】：

不需要js或jquery。 要停止页面重新加载，只需将按钮类型指定为“按钮”。 如果您不指定按钮类型，浏览器会将其设置为“重置”或“提交”以重新加载页面。

 <button type='button'>submit</button> 

【讨论】：

这确实有效！这是<input type='button' /> 的一个很好的替代品。

这很好用，尤其是在 Chrome 的情况下（接受的答案没有）

在 Windows 10 上的 Chrome 上工作。是的！

这很好，但在您实施后它不会强制执行必填字段。

【参考方案2】：

使用<button> 元素或<input type="button"/>。

【讨论】：

元素默认会导致 chrome 重新加载（至少）。

您仍然可以使用表单提交事件，如果您仍然不想返回，请返回 false

@Joe 实际上很不幸：/ 我需要我的 webapp 才能为 IE8 工作，而且重新加载有点烦人......

@pbeardshear 如果将其放置在表单中，则可以。当<button> 放置在表单之外时，不会发生刷新！

将type="button"添加到chrome中的<button>元素，它不会刷新

【参考方案3】：

在 html 中：

<form onsubmit="return false">
</form>

为了避免刷新所有“按钮”，即使分配了 onclick。

【参考方案4】：

您可以使用 jQuery 在按钮上添加点击处理程序并返回 false。

$("input[type='submit']").click(function()  return false; );

或

$("form").submit(function()  return false; );

【讨论】：

这不起作用。在 chrome 中返回 false，至少在最新版本中，仍然会导致刷新。

这是唯一对我有用的答案。我只是在我的函数中添加了 return false 并且在 safari 和 chrome 中都停止了刷新。

【参考方案5】：

在 HTML 中：

<input type="submit" onclick="return false">

对于 jQuery，一些类似的变体，已经提到过。

【参考方案6】：

您可以使用包含提交按钮的表单。然后使用 jQuery 来防止表单的默认行为：

$(document).ready(function($) 
  $(document).on('submit', '#submit-form', function(event) 
    event.preventDefault();
  
    alert('page did not reload');
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id='submit-form'>
  <button type='submit'>submit</button>
</form>

【参考方案7】：

如上面其中一个 cmets (burried) 中所述，可以通过不将按钮标签放在表单标签内来解决此问题。当按钮在表单之外时，页面不会自行刷新。

【参考方案8】：

我还不能发表评论，所以我将其发布为答案。 避免重新加载的最佳方法是@user2868288 所说的：在form 标签上使用onsubmit。

从这里提到的所有其他可能性来看，这是允许触发新的 HTML5 浏览器数据输入验证的唯一方法（<button> 不会这样做，jQuery/JS 处理程序也不会这样做）并允许您的 jQuery/AJAX 动态要在页面上附加的信息。 例如：

<form id="frmData" onsubmit="return false">
 <input type="email" id="txtEmail" name="input_email" required="" placeholder="Enter a valid e-mail" spellcheck="false"/>
 <input type="tel" id="txtTel" name="input_tel" required="" placeholder="Enter your telephone number" spellcheck="false"/>
 <input type="submit" id="btnSubmit" value="Send Info"/>
</form>
<script type="text/javascript">
  $(document).ready(function()
    $('#btnSubmit').click(function() 
        var tel = $("#txtTel").val();
        var email = $("#txtEmail").val();
        $.post("scripts/contact.php", 
            tel1: tel,
            email1: email
        )
        .done(function(data) 
            $('#lblEstatus').append(data); // Appends status
            if (data == "Received") 
                $("#btnSubmit").attr('disabled', 'disabled'); // Disable doubleclickers.
            
        )
        .fail(function(xhr, textStatus, errorThrown)  
            $('#lblEstatus').append("Error. Try later."); 
        );
     );
   ); 
</script>

【参考方案9】：

你也可以使用 JavaScript：

  let input = document.querySelector("input");
  input.addEventListener("submit", (event) => 
    event.preventDefault();
  )

【讨论】：

这应该是被批准的答案