Forum Moderators: open
I have an anchor tag in my jsp file which goes as below::
<a class="stdlink" href="javascript:createInvoice();"><img src="images/button_submit.gif" alt="Create Invoice" border="0"></a>
When the user clicks on it, the javascript function does some form validations and finally submits the form if all checks are passed.
The Problem that i am facing is that if the user clicks on this link twice then two records are getting inserted in the database which is wrong.
I want a way such that this href link gets disabled after it is clicked once so that i can avoid duplicate records.
This duplication of records is really making the system look Bad..
Please help me guys..
I have searched the solution and tried a lot of things but nothing seems to work. In some cases if i use onClick event handler the form doesnt submit even once and no record gets created.
Please HELP!
Thanks in Advance
You should generate the form dynamically, include a hidden field with a unique id. Then when you add a record, see if that record already exists. If it does, error out - "Already added, if you wish to edit, use this link/function."
But that withstanding, a normal button is disabled like this:
<input type="submit" onClick="this.disabled=true;" value="submit">
For a linked button, you may have to do something a little more complex:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>disable linked button</title>
<script type="text/javascript">
function attachClicks () {
if (document.getElementById) {
var clickedOnce = 0;
document.getElementById('form_submit').onclick = function() {
if (clickedOnce==1) {
alert('already submitted'); return false;
}
clickedOnce=1;
document.getElementById('testme').submit();
};
}
}
window.onload = function() { attachClicks(); };
</script>
</head>
<body>
<form method="post" name="testme" id="testme" action="some-script.cgi">
<a href="#" name="form_submit" id="form_submit"><img src="go-button.jpg"
width="50" height="20" border="0" alt="Click once to submit"></a>
</form>
</body>
</html>
If i am assured that javascript will not be disabled then is there any way that i can disable the href link through javascript after the form is submitted once.
I could disable a submit button but just cant implement the same with the following anchor tag
<a class="stdlink" href="javascript:createInvoice();"><img src="images/button_submit.gif" alt="Create Invoice" border="0"></a>
Is server side programming the only way to handle this situation?
Thanks
I could disable a submit button but just cant implement the same with the following anchor tag
Try my sample. What it does is create a function externally for the anchor tag. As you see, I've assigned it an ID. The function in the javascript applies to that link tag. I tested it, it appears to work.
Is server side programming the only way to handle this situation?
I would say it is BEST. Anything you put a form on the Internet is a potential point of attack on your scripts and server and needs to be addressed server-side. To quote [sic] Salena Sol,
Any user input it a potential hack.
Any user input is a potential hack.
You can BET that a hacker will certainly disable Javascript or circumnavigate it in some way, and many novice users fear Javascript "just because." Javascript should only be used as a tool to support and enhance user experience (IMO) - if you rely on it to correctly manage data, screen input, or manage database interaction you're setting up for a fall.
^ ^ Never tried that, if someone double-clicks doesn't that show a difference in milliseconds between the first and second hit?
No, you generate the number on page load, not on submit. I use that method all the time. Although Perl only uses seconds, not milliseconds, so as long as no 2 users load the page exactly the same second it's fine.
I write Perl so it's hardcoded onto the page. That way no JS to disable!
rocknbil is very right on that point, you should never rely on JS for functionality, because you can't rely on it.
Ah, when you typed "making my JS submit a reference number" I interpreted that as JS creating the number
It is, but only onload. If they refresh the page the number will change, but if they click the link 100 times (for some reason) the number will be the same.
!No button visible..Nothing to click for the user!
It seems to work..
Dabrowski, can you please tell me the code snippet to generate the number on form loading and how exactly should i use that number to avoid submitting the form twice.
Thanks
<input type='hidden' name='checkthis'><script>
var today = new Date();
var input = document.getElementsByName( "checkthis")[0];input.value = Math.round( today.getTime() /1000);
</script>
The hidden form field is instantly filled in with a number, the number of milliseconds since 1/1/70. Dividing it by 1000 turns it into the number of seconds instead, which fits into a 32-bit int, making it much easier to handle later.
You can change the type to text to see this number if you like.
When you submit the form, whatever script it submits to needs to check to see if this number has already been submitted. If the user refreshes the page, then the number will be different.
