OnClick - prevent user from multiple submits

Question

Possible Duplicate:
how to prevent multiple form submit from client side?

We have a project management tool which we are using, but when a user submits a log under task they click the submit button several times. this adds in several entries of the same information.

I have tracked down the code within the PHP file and I have seen online many solutions for on submit click. I have been playing around for the last four or five hours but unfortunately I have been unable to get anything to work. I was hoping someone could provide a little assistance:

This is the code that I have in the PHP file:

<input type="submit"  class="button" value="<?php echo $AppUI->_('update task'); ?>" onclick="updateTask();" />

effectively I just want the user to click the button, and after a single click. It is either greyed out or the user is unable to click any more.

Thank you

score 5 · Accepted Answer · answered Oct 26 '12 at 13:07

5

Just disable the button in updateTask() function:

document.getElementById("mysubmit").disabled = true;

This assummes you add ID to your submit button.

If it's an AJAX submit, make sure you reenable the button if the submit fails.

answered Oct 26 '12 at 13:07

Michal Klouda

14,263
7
53
77

Thank you :), If I wanted to make a popup... for example please wait.. It that much more complicated??? – Arthor Oct 26 '12 at 14:39
No, it's quite easy.. Especially if you use [blockUI](http://malsup.com/jquery/block) (you don't even need to disable the button then, see this [demos](http://malsup.com/jquery/block/#page)) – Michal Klouda Oct 26 '12 at 14:41

Sam Fen · Answer 2 · 2012-10-26T13:12:32.807

3

Why not simply disable the button in your updateTask() script?

document.getElementByID("myButton").disabled='disabled'

If the updateTask function is too generic, then your button could call a more specific function that deals with just that button:

function myButtonClicked() {
    document.getElementByID("myButton").disabled='disabled';
    updateTask();
}

and then change your button to call myButtonClicked instead of updateTask.

<input type="submit" ... onclick="myButtonClicked();" />

edited Oct 26 '12 at 13:12

answered Oct 26 '12 at 13:06

Sam Fen

5,074
5
30
56

Vanilla JS version (The question wasn't tagged with jQuery): `document.getElementById("myButton").disabled = 'disabled';` – jonvuri Oct 26 '12 at 13:08
Yup, sorry, was adding that while you were commenting, I guess! – Sam Fen Oct 26 '12 at 13:10
yes, ok, but can I not edit it with in the code givien? – Arthor Oct 26 '12 at 13:44
This is the code I have found that ask you to put somthing inif you have not written in the comment box ` – Arthor Oct 26 '12 at 13:54
Yes, you would add the code in the updateTask function: "function updateTask() { document.getElementByID("myButton").disabled='disabled'; var f = ....". I would start with that. If you find that you need to re-enable the button later, it might get a little more complicated. – Sam Fen Oct 26 '12 at 14:05
In answer to your other question above, yes, you could add the line "document.getElementByID("myButton").disabled='disabled';" before the "updateTask()" in the onClick property of the button, but I would say it's bad practice to put more JS logic in onClick beyond simply calling a function. It will make the code much harder to track down and debug and change things in the future. I would edit the JavaScript function itself (as you seem to be proposing in your subsequent comment). – Sam Fen Oct 26 '12 at 14:09

OnClick - prevent user from multiple submits

2 Answers2