模态对话框在提交时无法正常工作 - 页面回发到自身

发布于 2024-12-02 17:07:37 字数 3068 浏览 1 评论 0原文

我之前问过这个问题，所以另一篇文章可能会被关闭。但是，我没有得到完整的正确答案，代码中似乎总是缺少一些东西。我需要提交一封电子邮件，获取一个模式框（带有确认消息），让模式在 3 秒后淡出，成功提交后，加载另一个页面。

基本上，模态框褪色太快了。我想放慢速度。有人建议我删除

</form><form>

标签。尽管当我删除这些标签时模式确实会变慢，但现在提交后我没有看到“欢迎”页面。该页面似乎只是回发到自身而不是提交。我已经尝试了五天了，我不知道我做错了什么......我感谢所有答案。谢谢。

这是我的代码：

<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 src="js/modal_e-confirm.js" language="javascript"></script>
</td>
</tr>
</form>
</table>
<p>
</p>
<script>f_initializeForm();</script>
</body>
</html>

这是我从 Rusty Jeans 那里得到帮助的 jQuery。

$('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" );
    });
});

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

原文

I've asked this question before and so the other post may be closed. But, I didn't get the full correct answer, something always seem to be missing in the code. I need to submit an email, get a modal box (with a confirm msg), have the modal fade out after 3 seconds, and upon successful submission, another page is loaded.

Basically, the modal box is fading too fast. I want to slow it down. I've been advised to remove the

</form><form>

tags. Although the modal does slow down when I remove those tags, now I don't get the "welcome" page after submission. The page just seems to post back to itself instead of submitting. I've been trying to work this for five days, I have no idea what I'm doing wrong... I appreciate all answers. Thanks.

Here is my 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 src="js/modal_e-confirm.js" language="javascript"></script>
</td>
</tr>
</form>
</table>
<p>
</p>
<script>f_initializeForm();</script>
</body>
</html>

Here is the jQuery that I had help with from Rusty Jeans here at SO.

$('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" );
    });
});

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

分享到QQ

分享到微博