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

Question

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

- Ankur

Answer 1

不需要使用JS或jQuery。 只需将按钮类型指定为“button”，即可防止页面重新加载。

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

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

- Jafar Rasooli

---

没问题！这个确实有效！它是<input type='button' />的一个好替代品。 - Rick

这个方法效果很好，特别是在Chrome浏览器的情况下（而接受的答案不行）。 - hobailey

在Windows 10上使用Chrome工作。好的！ - ssdscott

这很棒，但是在你实现它之后它并没有强制执行必填字段。 - jade290

这里的问题是它没有调用所需的或验证。 - Oliver Dixon

Answer 2

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

- Andrew Hare

---

默认情况下，<button>元素会在chrome（至少）中导致页面重新加载。 - AdamC

你仍然可以使用表单的onsubmit事件，并返回false，如果你仍然不想返回。 - neu-rah

很不幸，@Joe，它确实会这样:/ 我需要我的Web应用程序能够在IE8上运行，并且刷新有点烦人... - Ms. Nobody

如果将<button>放在表单内，刷新就会发生；如果将其放在表单外，就不会发生刷新！ - Kevinvhengst

在 Chrome 中，将 type="button" 添加到 <button> 元素中即可避免刷新。 - Johnny Metz

Answer 3

在HTML中：

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

为了避免所有“按钮”甚至已分配onclick的“按钮”都进行刷新。

- user2868288

---

使用按钮会破坏表单的提交和必填功能。正确答案应该是不使用按钮来提交表单。 - jona

Answer 4

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

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

或者

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

- Chris Gutierrez

---

这个不起作用。在Chrome中返回false，至少在最新版本中，仍会导致刷新。 - user3690202

这是唯一一个对我有效的答案。我只是在我的函数中添加了“return false”，刷新在Safari和Chrome中都停止了。 - VessoVit

Answer 5

在HTML中：

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

使用jQuery或类似的变体，这已经被提到过了。

- pestilence669

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>

- ProgrammingWithRandy

Answer 7

您也可以使用JavaScript来完成这个任务：

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

- mac125

---

这应该是已批准的答案。 - Vignesh Ravichandran

Answer 8

如上面的一条评论所述（被埋没了），这个问题可以通过不将按钮标签放在表单标签内来解决。当按钮在表单外部时，页面不会刷新。

- Pablo Gonzalez

Answer 9

我目前无法评论，因此我将其发布为答案。 避免重新加载的最佳方法是使用@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>

- El Gucs

Answer 10

在底部添加并像这样输入 data-toggle="modal"

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

- Arif Maksum