Web Analytics Made Easy -
StatCounter email submit confirmation modal dialog - CodingForum


No announcement yet.

email submit confirmation modal dialog

  • Filter
  • Time
  • Show
Clear All
new posts

  • jQuery email submit confirmation modal dialog


    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.
        <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;
    [COLOR="Magenta"]    <style>
        body {
            font-family:Arial, Helvetica, sans-serif;
        <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>
        <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">
        <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>
        <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>

    Many thanks!!!