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

如上面其中一条评论（埋葬）所述，可以通过不将按钮标签放在表格标签内来解决这个问题。当按钮位于表单外部时，页面不会刷新自身。

Answer 8

我还不能发表评论，所以我将此作为答案发布。避免重新加载的最佳方法是@ 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 9

您也可以使用 JavaScript：

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

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

9 个答案: