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

Question

我有一个按钮（

<input type="submit">

）。当它被点击时，页面重新加载。由于我有一些在页面加载时调用的 jQuery

hide()

函数，这导致这些元素再次被隐藏。如何让按钮什么都不做，这样我仍然可以添加一些在单击按钮但不重新加载页面时发生的操作。

Answer 1

无需使用 JS 或 jQuery。 要停止页面重新加载，只需将按钮类型指定为“按钮”。

如果您不指定按钮类型，浏览器会自动将其设置为“重置”或“提交”，从而导致页面重新加载。

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

Answer 2

使用

<button>

元素或使用

<input type="button"/>

.

Answer 3

在 HTML 中：

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

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

Answer 4

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

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

或

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

Answer 5

在 HTML 中：

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

使用 jQuery，一些类似的变体，已经提到过。

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

Answer 7

您也可以为此使用 JavaScript：

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

Answer 8

如上面的评论之一（埋藏）所述，这可以通过不将按钮标签放在表单标签内来解决。当按钮在窗体之外时，页面不会自行刷新。

Answer 9

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

onsubmit

标签上的

form

。

从这里提到的所有其他可能性来看，这是允许触发新的 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>

Answer 10

在事件函数的第一行使用

event.preventDefault()

。

按钮必须是

button

类型并且在按钮html中包含

type="submit"

。

Answer 11

在按钮上添加 a 并像这样输入 data-toggle="modal"

<a data-toggle="modal"><button type="submit">Edit Profile</button></a>