preventing users from submitting inputs twice

[Ned White]

Hi All,

Im my c# web project, users click a submit button for credit card payment
process.
On the web server side ( on ButtonClick_Event) the user's input(name,date,cc
number etc.) is processed and some transactional database processes are
taken based on the inputs.

My problem is, users may think that the button click did not work, so they
can click it again and again or they can refresh the all page by pressing
the F5 button.
And These actions can lead to two or more submissions, resulting in more
database records being added for the same payment request.

How can i prevent users from submitting inputs twice and refreshing the page
?

Thanks..

NED

 

[Matthijs Krempel]

Hi Ned,

Maybe you can navigate away from the page and put a mechanism in place that
detects if a user allready inserted a payment record?

With kind regards,

Matthijs Krempel

 

[ThatsIT.net.au]

on the click event disable the button

sender.Enabled = False

 

[Ignacio Machin ( .NET/ C# MVP )]

on the click event disable the button

sender.Enabled = False

That does not work, that event is executed in the server, he needs
something that execute in the client.

 

[Ignacio Machin ( .NET/ C# MVP )]

Hi All,

Im my c# web project, users click a submit button for credit card payment
process.
On the web server side ( on ButtonClick_Event) the user's input(name,date,cc
number etc.) is processed and some transactional database processes are
taken based on the inputs.

My problem is, users may think that the button click did not work, so they
can click it again and again  or they can refresh the all page by pressing
the F5 button.
And These actions can lead to two or more submissions, resulting in more
database records being added for the same payment request.

How can i prevent users from submitting inputs twice and refreshing the page
?

Thanks..

NED

This is not as easy as it sounds problem, the main issue is that you
cannot disable the button cause it would disable the postback.
The solution I use is to have another hidden button and put it over
the submit button.
Here is the javascript I use for it, You have a button that needs to
position over your real button, for that you need to calculate the
position (FindPost)

let me know if you have any problem with the code


<input id='FakeButtonToMoveAround' Width='150px'
type='button' value='Processing ...' disabled='disabled'
style='visibility:hidden; position:absolute;z-index:1;' />
<script language='javascript' type='text/
javascript'>

function findPos(obj) {
var curleft = curtop = 0;

if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);

}
var retvar = new Object();
retvar.curleft = curleft;
retvar.curtop = curtop
return retvar;
}

function PutTheOtherButton(realc,
FakeButtonToMoveAround)
{
var fakec =
document.getElementById(FakeButtonToMoveAround);

var pos = findPos( realc);
fakec.style.zIndex = realc.style.zIndex+10;
fakec.style.posLeft = pos.curleft;
fakec.style.posTop = pos.curtop;
fakec.style.visibility = 'visible';
fakec.style.pixelWidth = realc.style.pixelWidth;
fakec.width = realc.width;
fakec.style.pixelWidth = realc.style.pixelWidth;
fakec.style.visibility = 'visible';

}

 

[Ignacio Machin ( .NET/ C# MVP )]

Firstly put up an immediate response along the lines of "We have
received your submission.  It will take a few seconds to process.
Please do not resend yout details or refresh this page."  That tells
the customer that you have got the transaction and are working on it.
Once you have finished processing then put up a "Thank you for your
custom" response.  Always give immediate feedback to the customer so
they know what is happening.

Secondly keep a record of all recent transactions and query if any
duplicates come up within say ten minutes.

rossum- Hide quoted text -

- Show quoted text -

IMHO it's just better to disable the submit mechanism.
You could also use a sort of veil control

 

[Peter Morris]

Look at paypal. They have a button which when clicked has JavaScript to
disable the button and then post the form.

 

[Lasse Vågsæther Karlsen]

This is not as easy as it sounds problem, the main issue is that you
cannot disable the button cause it would disable the postback.
The solution I use is to have another hidden button and put it over
the submit button.
Here is the javascript I use for it, You have a button that needs to
position over your real button, for that you need to calculate the
position (FindPost)

Does that change the focus away from the button the user pressed? If
not, a quick tap on the enter key will resubmit, regardless of how much
you've stuffed on top of the button.

There is one for-sure way to prevent double-orders:

1. generate a unique id (guid) alongside the order process
2. keep the guid with the order on all pages, up to the submit button
3. prevent any order from being processed if the guid is already in the
"processed" list

Couple that with your visual change on the button, and you should be set.

 

[ThatsIT.net.au]

message

on the click event disable the button

sender.Enabled = False

That does not work, that event is executed in the server, he needs
something that execute in the client.
this.disabled = true

 

[Cor Ligthert[MVP]]

Ned,

I never will make this at single step process. At least you need a step,
wherin the user can verify what his/her input was (withouth sending of
course confidential information) and then process "the already gotten
information" with a kind of process button only one time.

(And don't forget to tell that it is processed)

Just my thought, the implementation is yours.

Cor

 

[Arne Vajhøj]

There is one for-sure way to prevent double-orders:

1. generate a unique id (guid) alongside the order process
2. keep the guid with the order on all pages, up to the submit button
3. prevent any order from being processed if the guid is already in the
"processed" list

Couple that with your visual change on the button, and you should be set.

That is indeed the way to do it.

It is known as Synchronizer Token Pattern or just Token Pattern.

Arne

 

[Jerry C]

I use:



<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<script language="javascript" type="text/javascript" >
function HideDiv()
{
var divM = document.getElementById("divMain");
divM.style.visibility = 'hidden';
}

</script>
<body>
<form id="form1" runat="server" onsubmit="HideDiv();">
<div id="divMain">
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
</body>
</html>