/    Sign up×
Community /Pin to ProfileBookmark

A solution for ‘Click once’.

Here is a solution awaiting a problem. ?

When you want the user to click a button or a link ONLY ONCE, and not again.
Try this:

[code=php]
<html>
<head>
<title>Do Once</title>

<script type=”text/javascript”>
// idea from www.webdeveloper.com forum
// http://www.webdeveloper.com/forum/showthread.php?t=151682

function Hide(ids) { document.getElementById(ids).style.display = ‘none’; }
function Show(ids) { document.getElementById(ids).style.display = ‘block’; }
</script>

</head>
<body>

<div id=”showfirst” style=”display:block”>
<!– following could be replaced with <input type=”submit” value=”Submit”> –>
<button onClick=”Hide(‘showfirst’);Show(‘showlater’)”>Do Once</button>
Please submit your opinion. (This information is shown first.)
</div>

<div id=”showlater” style=”display:none”>
Thank you for your opinion. (This information is shown later.)
</div>

</body>
</html>
[/code]

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@Logic_AliJun 19.2007 — Here is a solution awaiting a problem. ?

[/QUOTE]
It could be a solution waiting to cause a problem. What if there's a connection problem when the form is submitted? Often one can press the browser's Stop button then retry the submit, but if the button is effectively removed from the document, the user probably will reload and probably lose his entries.

Something I have done successfully is to have the onsubmit handler count the number of times that it's called. Normally this will be only once before the page is dismissed, but on a second call I display an alert('Unless you are having trouble connecting, please do not press Send again.') then return false to abort.

Subsequent calls revert to the normal action of the handler.
Copy linkTweet thisAlerts:
@JMRKERauthorJun 19.2007 — OK, so I didn't think of everything. :o

Perhaps it will solve a problem that doesn't involve the 'onSubmit'.

Then again, maybe not. ?
Copy linkTweet thisAlerts:
@rootJun 19.2007 — in the HTML tag for the button, insert in an onClick property... onClick="this.disabled" which will on click disable the submit button.

As for the issue of only once and failure, a complete page refresh will reactivate the button.
×

Success!

Help @JMRKER spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...