Home/ Questions/Q 6368833
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T00:43:33+00:00

when I click the submit button, the dialog box flashes on the screen instead

  • 0

when I click the submit button, the dialog box flashes on the screen instead of taking 3 seconds to fade out. i am new js and jquery, so please dumb your answer down for me so that I can understand. 🙂 Here is my (EDITTED 9/1) code:

<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://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 href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-
lightness/jquery-ui.css" rel="stylesheet" type="text/css">

<STYLE TYPE="text/css">
     BODY, .BODY, TD
     {  color: ;
        font-size: ;
        font-family: ;
        font-weight: ;
        text-decoration: ;
        font-style: ;
     }
     </STYLE>
</head>
<body vlink="" alink="" link="" bgcolor="">
<!--  demo -->
<div class="demo">
<div id="dialog" title="Basic dialog">
<p>Email submitted successfully.  Thank you for signing up!</p>
</div>
</div>

<!-- End demo -->
<br>
<br>
<table border="0" cellspacing="0" cellpadding="5">
<form name="form" method="post" action="http://links.mkt41.net/servlet/UserSignUp?
f=755449&postMethod=HTML&m=0&j=MAS2">
<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> -->
<script language="javascript">

$( "#dialog" ).dialog({
autoOpen: false,
show: "fade",
hide: "fade",
open: function() {
    var dlg = $(this);
    setTimeout(function(){
        dlg.dialog("close");
    },
    3000); 
},

modal: true,
opacity: 1
});

$('form').submit(function() {
e.preventDefault();
$.post('http://links.mkt41.net/servlet/UserSignUp?
f=755449&postMethod=HTML&m=0&j=MAS2&EMAIL_REQUIRED=T&EMAIL_DATATYPE=email', {

        EMAIL: $('input[name=EMAIL]').val()
    },
    function (data) {
        $( "#dialog" ).dialog( "open" );
    });
});
</script>
</td>
</tr>
</form>
</table>
<p>
</p>
<script>f_initializeForm();</script>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re calling the dialog on a form submit button, which means you’re leaving the page when the form is submitted. You’re seeing the dialog for a brief moment before you leave the page. You’ll need to use Ajax to submit your form data without leaving the page.

    $('form').submit(function (e) {
    e.preventDefault();
    $.post('http://links.net/servlet/UserSignUp?f=755449&postMethod=HTML&m=0&j=MAS2&EMAIL_REQUIRED=T&EMAIL_DATATYPE=email', {
            EMAIL: $('input[name=EMAIL]').val()
        },
        function (data) {
            $( "#dialog" ).dialog( "open" );
        });
});

    Also want to note that you can not have two elements on the same page with the same id, currently you have a div and a input that both have the id of “opener”.

    To send the user to another page after the dialog closes you’ll have to add a close callback to your dialog. See the example below:

    $( "#dialog" ).dialog({
    autoOpen: false,
    show: "fade",
    hide: "fade",
    open: function(event, ui) {
        var dlg = $(this);
        setTimeout(function(){
            dlg.dialog("close");
        },
        3000); // wait 3 seconds before closing
        // Change the above number to the amount of time
        // (in milliseconds) that you want to wait before
        // closing the dialog.
    },
    close: function(event, ui) {
        window.location.replace("welcome_page.html");
    },
    modal: true,
    opacity: 1
});

    Replace "welcome_page.html" with the url that you want the user to be directed to.

    • 0