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

Announcement

Collapse
No announcement yet.

email submit confirmation modal dialog

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • jQuery email submit confirmation modal dialog

    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.
    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" />
    
    <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>
        <style>
        body {
            font-family:Arial, Helvetica, sans-serif;
            font-size:.7em;
        }
        </style>
        </head>
        <body vlink="" alink="" link="" bgcolor="">
    
    <div class="demo">
    
     <div id="dialog" title="Basic dialog">
    <p>Email submitted successfully.  Thank you for signing up!</p>
    
    
     </div>
        <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"> <div id="opener"> <input  type="button" name="submit" value="Submit" onClick="f_validateForm()" /></div> </td>
        </tr>
    </form>
        </table>
        <script>f_initializeForm();</script>
        </body>
        </html>

    Many thanks!!!
Working...
X