I have a javascript code. when you click a link a javascript function is called.
<a id="approveId" href="#" onclick="javascript:confirmApprove(contextPath);"
style="text-decoration:none">
<font style="color:#003150">
Approve
</font>
</a>
my goal
once user clicks Approve , I want to disable the link to be clicked further.
user can Approve once only .
Is there any easy Jquery or JavaScript solution ?
You didn’t show the confirmApprove function, but going by the inline JavaScript, inline CSS and the deprecated font tag I’m guessing it’s simply an outdated confirm dialog box.
You didn’t explain what you mean by “once”, per logged in user, per cookie, per session, per page load?
Maybe removing the link from the DOM would be good enough?
confirmApprove function
This submits data to some action.
outdated confirm dialog box.
Its not dialog box… but this submits data to action.
You didn’t explain what you mean by “once”, per logged in user, per cookie, per session, per page load?
per page load.
Maybe removing the link from the DOM would be good enough?
No. I don’t want to remove that link but disable that only.
I hope you got answers to your queries now. Will it be possible to suggest a suitable solution ?
an example snippet will be excellent
any comments ?
You could use a closure for the confirmApprove function, so that it won’t run more than once.
var confirmApprove = (function confirmApproveWrapper() {
var alreadyApproved = false;
return function confirmApproveInner(contextPath) {
if (alreadyApproved === false) {
... // approve them
alreadyApproved = true;
}
};
}());
I could not get you .
I am submitting form
document.MyForm.submit();
It’s designed so that it only runs once. If someone tries to run it a second (or third, or fourth) time, it just ignores them.
How do I call your function now…that part not clear.
I have this in HTML
Do you see how the function is given the same name as the one that you are calling from the onclick attribute?
I have this function confirmApprove.
Does my confirmApprove = confirmApproveInner ?
No, your confirmApprove will equal the instantiated confirmApproveWrapper, which is assigned to confirmApprove.
Place the contents of your confirmApprove in the appropriate spot of my confirmApproveInner.
That being:
... // approve them
Ok…I’ll check it out.
This is my function
function confirmApprove(contextPath)
{
if(anotherFunc()){
var bConfirm= confirm("This will confirm your statement. After successful confirmation you will be directed to list screen.")
if (bConfirm)
{
$('#someHiddenDiv').show(); // this is a preloader
navigateAway=true;
isUnChanged=true;
var val=document.getElementById("talId").value;
document.MyForm.action=contextPath + "/s/saveConfirm.do"+"?"+"Id="+val;
document.MyForm.target="_self";
document.MyForm.submit();
}
}
}
Could you please rephrase your function with my content.
also if I replace my content in your inner method …once the form is submitted , does your code alreadyApproved = true; will be set ?
I will not. You have been given more than enough to do that by yourself.
my doubt is
once the form is submitted , does your code alreadyApproved = true; will be set ?
Yes.
Ok…I’ll check it soon ans update it here in 5 minutes.
Oh wait - when you say once the form is submitted, do you mean after the form has been submitted and the form page has been reloaded?
When do you want the approve link to not be clicked? While the person is on the same page before the form is submitted, or at all times after it’s been clicked, including after form has been submitted?
If the latter, then a change would need to happen to my code. That change being:
var alreadyApproved = false;
$.get("isThisFormAlreadyApproved.php", function (response) {
alreadyApproved = response.isApproved;
});
That should be about it. Apart from creating that PHP file of course to retrieve info from the database.
This is the flow
User click approve.
link now disabled // to avoid multiple click
form submitted
result page appeared.