Question

我希望在单击并完成激活后不再显示此按钮。我尝试这样做的原因是，如果用户点击两次提交按钮，则在加载新页面之前，会发出两个帖子。我遵循了这种方法Hide Button After Click (With Existing Form on Page)，但这并不适合我。

<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

将按钮的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>

单击时如何使按钮（输入类型=＆＃34;提交＆＃34;）消失

2 个答案: