how to make a button(input type=“submit”) dissapeared when clicked
Question
I want this button to be absent after it has been clicked and finish activated. The reason I'm trying to make it like this is because, before new page gets loaded if user clicks submit button twice, then two posts are made. I followed this approach, Hide Button After Click (With Existing Form on Page) but this isn't working for me some reason.
<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>
I have input type="submit" I need to hide this once it's clicked.
2 answers
solution1
3 ACCPTED 2016-02-14 07:06:54
Set Button's display to 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>
OR
You can even set button's attribute to 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>
EDIT
You can show some waiting message after hiding the submit button:
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>
solution2
0 2016-02-14 08:01:06
this is the easiest way to do it with jquery, I used online 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>
or else you can disable it after user click once like this
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.