best way to disable a submit button

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

best way to disable a submit button

Post by raghavan20 »

normally during a long backend process, we want the submit button to be disabled so that won't retry again....
but the problem is when i disable a submit button on a 'onsubmit' event, it disables the submit button but at the same time, it is not posted / submitted...

so I am looking for a solution where i can disable submit button but at the same time all the values should be posted/submitted...thanks...
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

Code: Select all

.....onSubmit="document.forms[0].Submit.disabled = true;">
.....
<input id="Submit" name="Submit" type="submit" value="submit">
.....
That's usually what I do, except I call it in a function that changes the value and does a couple other things. I don't understand why disabling the submit button would keep your data from being processed though.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post by Roja »

Also keep in mind that if javascript is disabled, they can still multi-submit. Thats why you should do a post-redirect-get method for form processing.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

Well, if he's doing a long backend script like he says, the method of how he's doing it would be trivial. I believe he's trying to thwart users from clicking submit more than one time while the script is processing after the initial submit.

On the backend.. you could not allow the users to abort the script by using ignore_user_abort().

But the javascript solution should thwart most users.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post by Roja »

scottayy wrote:Well, if he's doing a long backend script like he says, the method of how he's doing it would be trivial. I believe he's trying to thwart users from clicking submit more than one time while the script is processing after the initial submit.
Its not trivial - its the difference between people being able to submit twice or not. Thats exactly what he asked.

http://www.theserverside.com/patterns/t ... d_id=20936

You post to a middle script, which redirects to a get-driven page, that displays the results. Hitting submit again wont process a second time. No javascript needed, no way around it. Its the "best" solution to the problem - which is the title of the thread.

Javascript can be turned off. This can't.
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

Post by JayBird »

If it is absolutely paramount they cant press submit again, i'd go along with what Roja is suggesting
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

Well, I use the post-redirect-get method for nearly all of my form handling. I also know that when I check tokens for the submitted form (for security), that if I press submit twice, i get an invalid token error. So the script must have processed enough to check the token information and remove the token from the database.. thus generating the invalid token error.

So, I do believe the script DOES get processed again after the submit button is clicked again. I could be wrong, but I'm speaking totally on experience and no knowledge of the subject matter.

Either way, a javascript solution would be good for the front-end and as a user convenience. But the backend should have a guaranteed solution as well. Either what Roja has posted, or the ignore_user_abort() or a combination.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post by raghavan20 »

thanks for all your answers..
Roja,,,do you have or seen a PHP example of implementing PRG pattern...I have to see a script so that I clearly understand the concept...
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post by raghavan20 »

i thought of making this more clear:

i have a page to delete a user by POST

actions to be performed:
delete user

final messages:
result of deleting
navigation links

now can you tell me how can I apply the PRG pattern?
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post by Roja »

raghavan20 wrote:i thought of making this more clear:

i have a page to delete a user by POST

actions to be performed:
delete user

final messages:
result of deleting
navigation links

now can you tell me how can I apply the PRG pattern?
Great example!

actionpage.php - Contains a form with a button "Delete User". The user clicks that button. The form that contains that button has form action = redirectpage.php .

redirectpage.php - Perform the action, deleting the user, and redirect to the next page. (Personally, I really like using header redirects, as they are faster than http meta redirects, making it almost seemless - like you didnt even get to that page). It redirects to resultspage.php .

resultspage.php - Display the status of the change that occurred on redirectpage.

If they hit refresh on resultspage, it simply redisplays the status of the last change, instead of repeating the action.

If they hit back from resultspage, it goes back to actionpage (not redirectpage), which loads the form over again, presumably with new data, reflecting the fact that there is no user to delete.

If you want to get even more restrictive, to totally lock out any possibility of multiple changes, you can send a unique id from the db to the form. When the form is processed, add the id to the "completed" table. Only process forms if the id does not exist in the completed table.

That way, you have prevented refresh submits (using PRG), and multiple click submits (using db-driven semaphore locking). No javascript needed. :)
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post by raghavan20 »

Well explained, I will try in my next upcoming work and see how this turns out.
Thanks for Roja and for all.


EDIT: but only doubt....but the final page has some messages...

Code: Select all

The addess has been disabled successfully !!! 
You may now, 
[the following are actually links]
» Go to Index
» View User
» View Address
Now you want me to send this to the last page by POST or any better means available???
Post Reply