/    Sign up×
Community /Pin to ProfileBookmark

Triggering onsubmit w/onclick

Copy linkTweet thisAlerts:
Oct 29.2007

I’ve got a situation where I need to have a text link submit a form and I need to have a confirm() alert box pop up before the submission proceeds.

I’ve got both pieces working indvidiually. I can submit the form using an onclick in the href. I can also get a confirmation box popping up when a submit button is hit. I can’t seem to get the onclick from the href link to cause the form onsubmit to trigger.

When the text submit link is hit no confirm box shows up and it goes straight to the form destination.

You can see it action [URL=”http://test.otheroom.com/alert_test3.html”] here[/URL]. The alert_dest.php code just outputs all the $_POST vars.

[code=html]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<title>Test Alert Confirmation</title>
<meta name=”generator” content=”BBEdit 8.7″ />
</head>
<body>
<h1>Test Alert Confirmation</h1>

<form action=”alert_dest.php” method=”post” id=”orderform” name=”orderform”
onsubmit=”javascript:return confirm(‘Are you sure you want to submit this order?’)”>

<a href=”javascript:void(0);” onclick=”document.orderform.submit(); return false”>Text Submit</a>
<input name=”button” type=”submit” value=”Submit” />
<input name=”order_idnum” type=”hidden” value=”5″ />
</form>

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

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@savvykmsOct 29.2007 — I don`t think you need both the text link and the submit button, if you are going for broswer compatibility juse use the button as it will submit without the confirmation box if the broswer does not support javascript, or you can do a function such as
[CODE]function askcontinue() {
if (confirm) {
document.orderform.submit();
}
}[/CODE]
then you can just do this
[CODE]<noscript>
<input type="submit" value="Order">
If you see this button, click it instead of the below link.
</noscript>
<a href="javascript://" onclick="askcontinue()">Order</a>[/CODE]
Copy linkTweet thisAlerts:
@otheroomauthorOct 29.2007 — Sorry if I was unclear but I just included the submit button to show that it triggers the onsubmit confirm box while the text submit does not.

I need to use a text submit because the form is going to be embedded in a table cell in a report with the text size set pretty small, like 0.75em. The submit button is causing the cell to become too large vertically.

For this project I'm in a position where I don't have to allow for people not having javascript active.

My goal here is to have a text link submit the form and trigger the confirm box.
Copy linkTweet thisAlerts:
@otheroomauthorOct 29.2007 — Are there any JavaScript hotshots here that can help me out with this one?
Copy linkTweet thisAlerts:
@FangOct 29.2007 — Fake it:input {
overflow:visible;
padding:0;
border:0;border-bottom:1px solid blue;
color:blue;
cursor:pointer;
}
Copy linkTweet thisAlerts:
@otheroomauthorOct 29.2007 — I'm not opposed to faking it if it would work but this one doesn't quite cut it. The font selection and size don't match the rest of the text in the form. It was a good try.

I actually figured this one out on my own. Instead of using the onsubmit in the form I just put both actions into the onclick text link.

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test Alert Confirmation</title>
<meta name="generator" content="BBEdit 8.7" />
<script type="text/javascript" language="javascript">
function confirmSubmit(alertMsg) {
if (confirm(alertMsg)) document.orderform.submit();
return;
}
</script>
</head>
<body>
<h1>Test Alert Confirmation</h1>

<form action="alert_dest.php" method="post" id="orderform" name="orderform">
<a href="javascript:void(0);" onclick="confirmSubmit('Are you sure you want to submit this order?'); return false">Text Submit</a>
<input name="order_idnum" type="hidden" value="5" />
</form>

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

Success!

Help @otheroom 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 5.6,
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,
)...