Tweet
Hi,
I'm new to jQuery/javascript. I've inherited a form where users input their email address and click the "submit" button. Here's what I want to do:
1. After the user clicks the submit button, I want a modal dialog box to display confirming their submission and thanks them for signing up.
2. After a few seconds, I want the dialog box to fade out without the user having to click a close "x" or button and the page refresh back to itself with an empty form.
Could someone help me with how can this be coded to work that way?
(note: I'm using a bogus post method url for this question)
Here is my code.
Many thanks!!!
I'm new to jQuery/javascript. I've inherited a form where users input their email address and click the "submit" button. Here's what I want to do:
1. After the user clicks the submit button, I want a modal dialog box to display confirming their submission and thanks them for signing up.
2. After a few seconds, I want the dialog box to fade out without the user having to click a close "x" or button and the page refresh back to itself with an empty form.
Could someone help me with how can this be coded to work that way?
(note: I'm using a bogus post method url for this question)
Here is my code.
Code:
<html>
<head>
<title>Email Us</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://recp.rm04.net//ui/library/formValidate.js" language="javascript"></script>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" type="text/css" />
[COLOR="red"]<script type="text/javascript" language="javascript">
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true,
opacity: 1,
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
return false;
});
});
</script>[/COLOR]
[COLOR="Magenta"] <style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size:.7em;
}
</style>[/COLOR]
</head>
<body vlink="" alink="" link="" bgcolor="">
<div class="demo">
[COLOR="Magenta"]<div id="dialog" title="Basic dialog">[/COLOR]
<p>Email submitted successfully. Thank you for signing up!</p>
[COLOR="Magenta"]</div>[/COLOR]
<br>
<br>
<table border="0" cellspacing="0" cellpadding="5">
<form name="form" method="post" action="http://links.emailmkt.net/servlet/UserSignUp?f=7aa411=HTML&m=0&e=SMP2">
<tr>
<td valign="top"><span style="color:#CC0000">*</span></td>
<td valign="top" align="left">Email:</td>
<td><input type="hidden" name="EMAIL_REQUIRED" value="T">
<input type="hidden" name="EMAIL_DATATYPE" value="email">
<input type="text" name="EMAIL" value="" maxlength="4000"></td>
</tr>
</form>
<form>
<tr>
<td align="center" colspan="3"> [COLOR="Magenta"]<div id="opener">[/COLOR] <input type="button" name="submit" value="Submit" [COLOR="Red"]onClick="f_validateForm()[/COLOR]" />[COLOR="Magenta"]</div>[/COLOR] </td>
</tr>
</form>
</table>
<script>[COLOR="Red"]f_initializeForm();[/COLOR]</script>
</body>
</html>
Many thanks!!!