Coldfusion - How to prevent multiple clicks?

Question

I have a button (anchor tag) that send a confirm message if you press it. The problem is that for example if you press it 5 times very quickly it will send 5 confirm messages, if you press it 2 times it will send 2 messages.

This can occur when the user has low connection speed and while the page is refreshing he presses again the button.

How can I manage this situation? I though of disabling the button but for other reasons this is not possible.

<a class="msg" href="/manage/conversations.cfm?destination=#destination#">
        #ucase(request.l('Send'))#
</a>

Thank you for your time

You talk about a button and display an anchor tag. Please resolve the inconsitency. — Dan Bracuk, Jun 23 '15 at 09:34
Why is this tagged as ColdFusion? This is a client side issue. — Scott Stroz, Jun 23 '15 at 14:26
@DanBracuk You do realize that with CSS a anchor tag can look just like a button right? — Dave Ferguson, Jun 23 '15 at 14:35
Look at the 2nd answer, it may be helpful: http://stackoverflow.com/questions/4699352/solving-the-double-submission-problem — volume one, Jun 24 '15 at 12:03

Dave Ferguson · Accepted Answer · 2015-06-23T15:24:53.273

7

Ultimately, you need to have code on your server to prevent processing the link multiple times from the same user.

However, to solve the UI issue, have you link call a function instead of the cf file directly.

<a class="msg" href="javascript: processLink(#destination#);">
        #ucase(request.l('Send'))#
</a>

<script>
runCount = 0;

function processLink(destination){
runCount++;

if (runCount == 1){
 window.location.href = "/manage/conversations.cfm?destination=" + destination;
}

}
</script>

edited Jun 23 '15 at 15:24

answered Jun 23 '15 at 14:34

Dave Ferguson

743
3
10

Yep, but do not make `runCount` a function local variable, or the value will always be "1". – Leigh Jun 23 '15 at 15:11
@Leigh Good catch.. I updated the code to reflect your comment. – Dave Ferguson Jun 23 '15 at 15:25

score 2 · Answer 2 · edited Jul 07 '15 at 14:49

As mentioned in the previous answer it's nice to have some client side javascript to stop duplicate submissions from trigger happy users however you should also do this checking server side.

One approach would be to create a hidden formfield with a GUID that coldfusion generates when coldfusion renders your form.

So something like:

<cfset GUID = createUUID()>

<cfoutput>
<form id="frm" action="/target.cfm" method="post">
<input type="hidden" name="guid" value="#GUID#">
<!-- all your formfields go here -->
<input type="submit">
</form>
</cfoutput>

On the server side the target page then checks if it has already previously received the GUID. There are lots of ways to do, here are two of many ways.

a) Use Session Scope.

This is probably the quickest way if you are not running in a clustered environment and just need something quick for a tiny application.

<cfif isDefined("session.MYPAGE_GUID") AND session.MYPAGE_GUID EQ form.guid>
<cfoutput>Duplicate Form Submission</cfoutput>
<cfabort>
<cfelse>
<cfset session.MYPAGE_GUID = form.guid>
<!-- Do Business Logic Here -->
</cfif>

b) Use a Database Table. Create a database table with a column called GUID. Make sure that GUID is the primary key or has a unique constraint.

Before you run your business logic insert the form.GUID into the database table. If you can do the insert process your business logic, if not the database query will throw an error that the record exists. You can then catch this error and take the appropriate action for a duplicate submission.

I prefer the database option as it works across clustered environments and database server are solid protecting against race conditions to ensure that a GUID is only set once.

Please be aware that this is just demonstrating the basic concepts and is not a drop in solution. There is a bit of more work to get these concepts into an e-commerce solution.

score -2 · Answer 3 · answered Jun 23 '15 at 12:04

The best way is to disable the link once it's selected. If you don't want to do that, an alternative is to structure conversations.cfm like this.

<div id="pageContent">
small amount of text
</div>
<cfflush>
</body>
</html>

<cfsavecontent variable = "actualPageContent">
code
</cfsavecontent>

<cfoutput>
<script>
var #toScript(actualPageContent, "newPageContent")#; 
document.getElementById("pageContent").innerHTML = "newPageContent";
</script>
</cfoutput>

This is the most convoluted way to solve a simple UI issue. – Dave Ferguson Jun 23 '15 at 14:25 — Dave Ferguson, Jun 23 '15 at 14:25

Coldfusion - How to prevent multiple clicks?

3 Answers3