單擊時如何使按鈕（輸入類型=“提交”）消失

Question

單擊並完成激活后，我希望此按鈕不存在。 我試圖這樣做的原因是，如果用戶點擊兩次提交按鈕，在加載新頁面之前，則會發布兩個帖子。 我遵循這種方法，點擊后隱藏按鈕（頁面上有現有表格），但這對我來說不起作用。

<form id="post_form" method="post" action="/add_post/" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form|crispy }}

<input type="submit" id="button" name="submit" value="submit">
</form>

我有輸入type="submit"我需要在點擊后隱藏它。

Answer 1

將Button的display設置為none ：

 document.addEventListener('DOMContentLoaded',function(){ document.getElementById('post_form').addEventListener('submit',function(){ document.getElementById('button').style.display='none'; },false); },false);

 <form id="post_form" method="post" action="/add_post/" enctype="multipart/form-data"> <input type="submit" id="button" name="submit" value="submit"> </form>

要么

您甚至可以將按鈕的屬性設置為disabled ：

 document.addEventListener('DOMContentLoaded',function(){ document.getElementById('post_form').addEventListener('submit',function(){ document.getElementById('button').setAttribute('disabled','disabled'); },false); },false);

 <form id="post_form" method="post" action="/add_post/" enctype="multipart/form-data"> <input type="submit" id="button" name="submit" value="submit"> </form>

編輯

隱藏提交按鈕后，您可以顯示一些等待消息：

 document.addEventListener('DOMContentLoaded', function() { document.getElementById('post_form').addEventListener('submit', function() { document.getElementById('button').style.display = 'none'; document.getElementById('wait').style.display = 'block'; }, false); }, false);

 #wait { display: none; }

 <form id="post_form" method="post" action="/add_post/" enctype="multipart/form-data"> <input type="submit" id="button" name="submit" value="submit"> <p id='wait'>Please Wait..</p> </form>

Answer 2

這是使用jquery完成它的最簡單方法，我使用了在線jquery。

 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>jquery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <style type="text/css"> #hideme{ border-radius: 5px; background-color: orange; color: black; border:1px solid black; font-size: 15px; text-align: center; } </style> </head> <body> <input type="submit" id="hideme" name="submit" value="submit"/> <script type="text/javascript"> $("#hideme").click(function(){ $(this).hide(); }); </script> </body> </html>

或者你可以在用戶點擊一次后禁用它

 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>jquery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <style type="text/css"> #hideme{ border-radius: 5px; background-color: orange; color: black; border:1px solid black; font-size: 15px; text-align: center; } </style> </head> <body> <input type="submit" id="hideme" name="submit" value="submit"/> <script type="text/javascript"> $("#hideme").click(function(){ $(this).css({"opacity":"0.5"}).prop('disabled',true); }); </script> </body> </html>

單擊時如何使按鈕（輸入類型=“提交”）消失

問題描述

2 個解決方案

解決方案1
3 已采納 2016-02-14 07:06:54

解決方案2
0 2016-02-14 08:01:06

單擊時如何使按鈕（輸入類型=“提交”）消失

問題描述

2 個解決方案

解決方案1 3 已采納 2016-02-14 07:06:54

解決方案2 0 2016-02-14 08:01:06

解決方案1
3 已采納 2016-02-14 07:06:54

解決方案2
0 2016-02-14 08:01:06