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


116

我有一个按钮(<input type="submit">)。单击后,页面将重新加载。由于我有一些hide()在页面加载时调用的jQuery 函数,因此导致这些元素再次被隐藏。我如何使按钮什么也不做,所以我仍然可以添加单击按钮但不重新加载页面时发生的某些操作。

Answers:


228

不需要js或jquery。要停止页面重新加载,只需将按钮类型指定为“按钮”即可。如果您未指定按钮类型,浏览器会将其设置为“重置”或“提交”,从而导致页面重新加载。

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

3
确实有效!这是的好选择<input type='button' />
里克

5
这很好用,尤其是在Chrome的情况下(对于这种情况,公认的答案不正确)
hobailey

3
在Windows 10上的Chrome上工作。
ssdscott

82

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


110
默认情况下,<button>元素会导致重新加载chrome(至少)。
AdamC 2012年

2
您仍然可以使用表单onsubmit事件,如果仍然不想返回,则返回false
neu-rah 2012年

4
@Joe实际上很不幸://我需要我的webapp才能为IE8工作,并且重新加载有点烦人……
没人女士

24
@pbeardshear如果将其放置在表单中,则会执行此操作。当<button>放置在表格外时,刷新不会发生!
Kevinvhengst,2014年

13
添加type="button"<button>chrome中的元素,它不会刷新
Johnny Metz

21

在HTML中:

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

为了避免刷新所有“按钮”,即使分配了onclick也是如此。


15

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

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

要么

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

6
这行不通。至少在最新版本中,chrome中返回false仍会导致刷新。
user3690202 2014年

这是唯一对我有效的答案。我只是在函数中添加了return false,并且在Safari和Chrome中都停止了刷新。
VessoVit

13

在HTML中:

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

对于jQuery,已经提到了一些类似的变体。


9

您可以使用包含提交按钮的表单。然后使用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>


4

如上述评论之一(隐藏)中所述,可以通过不将button标签放置在form标签内来解决此问题。当按钮位于表单外部时,页面不会自动刷新。


2

我目前无法发表评论,因此我将其发布为答案。避免重新加载的最佳方法是@ user2868288所说的:onsubmitform标记上使用。

从这里提到的所有其他可能性中,这是唯一的方法,它可以触发新的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>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.