Disable submit button after first press

[mlucicom]

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>

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"/>

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

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:

OkSatiesfiedVery satisfied