Disable submit button after first press

mlucicom
Posts: 32

Disable submit button after first press

Hello! I have a form that insert results to database.
Many users press this button several times until the confirmation message appears.
How can i disable button click after first press?

Code: Select all

<form action="" method="post" enctype="multipart/form-data"> <h3 class="box-title">Please contact me i would like to discuss about</h3> <a href="user-proprietes.php"> <button type="button" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-arrow-left"></span>Go back </button></a> <div class="form-group"> <label></label> <select class="form-control" name="satisfacere"> <option value="Very dissatisfied">Very dissatisfied</option> <option value="dissatisfied">Dissatisfied</option> <option value="ok">Ok</option> <option value="Satisfied">Satiesfied</option> <option value="Very Satisfied">Very satisfied</option> </select> </div> <div class="form-group"> <label>I'm satisfied about:</label> <textarea class="form-control" rows="3" name="lucruri" placeholder="Enter ..."></textarea> </div> <div class="form-group"> <input type="file" name="Filename"> </div> <div class="form-group"> <label>Thing that you can improve:</label> <textarea class="form-control" name="imbunatatire" rows="3" placeholder="Enter ..."></textarea> </div> <input type="submit" value=" Submit " name="submit"/><br /> </form>

Admin
Hello,
You can use one of these methods:

1. Add the "disabled" attribute after first click on it, using: "this.setAttribute('disabled', 'disabled');".

Code: Select all

<input type="submit" value=" Submit " onclick="this.setAttribute('disabled', 'disabled');" name="submit"/>
2. Or, hide the button after first click on it, using: "this.style.display='none';".

Code: Select all

<input type="submit" value=" Submit " onclick="this.style.display='none';" name="submit"/>

mlucicom
but the code with "disabled" don't submit the form..only set the attribute disabled to button

Admin
You can use "onclick" with: this.style.display='none', or: this.style.visibility='hidden'; will automatically hide the button, so, it will not be pressed again.

If you want with "disabled", try with "onsubmit" attribute added in <form> tag; like in this example:

Code: Select all

<form action="" method="post" enctype="multipart/form-data" onsubmit="return this['submit'].setAttribute('disabled', 'disabled');"> <select name="satisfacere"> <option value="ok">Ok</option> <option value="Satisfied">Satiesfied</option> <option value="Very Satisfied">Very satisfied</option> </select><br> <input type="text" name="txt1" /><br> <input type="submit" value=" Submit " name="submit"/> </form>
Demo:



Similar Topics