javascript - 单击时如何使按钮(输入类型 ="submit")消失

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

将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>