blocks|key|1171010|text|不需要使用js或jquery。要停止页面重载，只需将按钮类型指定为“button”。如果你不指定按钮类型，浏览器会将其设置为“重置”或“提交”，这会导致页面重新加载。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1171011|+<button+type='button'>submit</button>+|code-block|syntax|javascript|1171012|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>there is no need to js  or jquery.
to stop page reloading just specify the button type as 'button'.
if you dont specify the button type, browser will set it to 'reset' or 'submit' witch cause to page reload.</p>
<pre><code> &lt;button type='button'&gt;submit&lt;/button&gt; 
</code></pre>


blocks|key|1386035|text|使用元素或使用<input+type="button"/>。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1386036|entityMap^0|7|M|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Use either the <a href="http://www.w3schools.com/tags/tag_button.asp" rel="noreferrer"><code>&lt;button&gt;</code></a> element or use an <code>&lt;input type="button"/&gt;</code>.</p>


blocks|key|1170931|text|在HTML中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1170932|<form+onsubmit="return+false">
</form>|code-block|syntax|javascript|1170933|为了避免刷新所有“按钮”，即使分配了onclick也是如此。|1170934|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>In HTML:</p>

<pre><code>&lt;form onsubmit="return false"&gt;
&lt;/form&gt;
</code></pre>

<p>in order to avoid refresh at all "buttons", even with onclick assigned.</p>


blocks|key|1170842|text|您可以使用jQuery在按钮上添加一个单击处理程序，并返回false。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1170843|$("input[type='submit']").click(function()+{+return+false;+});|code-block|syntax|javascript|1170844|或|1170845|$("form").submit(function()+{+return+false;+});|1170846|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You could add a click handler on the button with jQuery and do return false.</p>

<pre><code>$("input[type='submit']").click(function() { return false; });
</code></pre>

<p>or</p>

<pre><code>$("form").submit(function() { return false; });
</code></pre>


blocks|key|1170879|text|在HTML中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1170880|<input+type="submit"+onclick="return+false">|code-block|syntax|javascript|1170881|对于jQuery，一些类似的变体，已经提到过。|1170882|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>In HTML:</p>

<pre><code>&lt;input type="submit" onclick="return false"></code></pre>

<p>With jQuery, some similar variant, already mentioned.</p>


blocks|key|1386506|text|您可以使用包含“提交”按钮的表单。然后使用jQuery阻止表单的默认行为：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1386507|​|1386508|$(document).ready(function($)+{
++$(document).on('submit',+'#submit-form',+function(event)+{
++++event.preventDefault();
++
++++alert('page+did+not+reload');
++});
});|code-block|syntax|javascript|1386509|<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>|1386510|1386511|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>You can use a form that includes a submit button. Then use jQuery to prevent the default behavior of a form:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function($) {
  $(document).on('submit', '#submit-form', function(event) {
    event.preventDefault();
  
    alert('page did not reload');
  });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;form id='submit-form'&gt;
  &lt;button type='submit'&gt;submit&lt;/button&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1171090|text|正如上面的一条注释(埋藏的)所述，这可以通过不将按钮标记放在表单标记内来修复。当按钮在窗体外部时，页面不会自动刷新。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1171091|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>As stated in one of the comments (burried) above, this can be fixed by not placing the button tag inside the form tag. When the button is outside the form, the page does not refresh itself. </p>


blocks|key|1386455|text|我还不能评论，所以我把这作为一个答案。避免重载的最好方法是@user2868288所说的:在form标签上使用onsubmit。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1386456|在这里提到的所有其他可能性中，这是唯一允许触发新的HTML5浏览器数据输入验证的方法(<button>和jQuery/JS处理程序都不会这样做)，并允许将jQuery/AJAX动态信息附加到页面上。例如：|1386457|<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>|code-block|syntax|javascript|1386458|entityMap^0|1A|4|1J|8|0|17|8|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

<p>I can't comment yet, so I'm posting this as an answer.
Best way to avoid reload is how @user2868288 said: using the <code>onsubmit</code> on the <code>form</code> tag. </p>

<p>From all the other possibilities mentioned here, it's the only way which allows the new HTML5 browser data input validation to be triggered (<code>&lt;button&gt;</code> won't do it nor the jQuery/JS handlers) and allows your jQuery/AJAX dynamic info to be appended on the page.
For example:</p>

<pre><code>&lt;form id="frmData" onsubmit="return false"&gt;
 &lt;input type="email" id="txtEmail" name="input_email" required="" placeholder="Enter a valid e-mail" spellcheck="false"/&gt;
 &lt;input type="tel" id="txtTel" name="input_tel" required="" placeholder="Enter your telephone number" spellcheck="false"/&gt;
 &lt;input type="submit" id="btnSubmit" value="Send Info"/&gt;
&lt;/form&gt;
&lt;script type="text/javascript"&gt;
  $(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."); 
        });
     });
   }); 
&lt;/script&gt;
</code></pre>


blocks|key|1386552|text|您也可以使用JavaScript来实现此目的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1386553|++let+input+=+document.querySelector("input");
++input.addEventListener("submit",+(event)+=>+{
++++event.preventDefault();
++})|code-block|syntax|javascript|1386554|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You could also use JavaScript for that:</p>
<pre><code>  let input = document.querySelector(&quot;input&quot;);
  input.addEventListener(&quot;submit&quot;, (event) =&gt; {
    event.preventDefault();
  })
</code></pre>


<p>I have a button (<code>&lt;input type="submit"&gt;</code>). When it is clicked the page reloads. Since I have some jQuery <code>hide()</code> functions that are called on page load, this causes these elements to be hidden again. How do I make the button do nothing, so I can still add some action that occurs when the button is clicked but not reload the page.</p>


How do I make an HTML button not reload the page

jQuery

HTML5

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

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

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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