как замедлить модальное диалоговое окно и отправить форму электронной почты - PullRequest
Новая
       1

как замедлить модальное диалоговое окно и отправить форму электронной почты

0 голосов
/ 26 августа 2011

когда я нажимаю кнопку отправки, диалоговое окно мигает на экране, вместо того, чтобы затухать в течение 3 секунд.Я новичок и JQuery, поэтому, пожалуйста, дайте мне свой ответ, чтобы я мог понять.:) Вот мой (РЕДАКТИРОВАННЫЙ 9/1 ) код: 

<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>

Ответы [ 3 ]

1 голос
/ 26 августа 2011

Вы вызываете диалоговое окно для кнопки отправки формы, что означает, что вы покидаете страницу, когда форма отправлена.Вы видите диалог на короткое время, прежде чем покинуть страницу.Вам нужно будет использовать Ajax для отправки данных формы, не покидая страницы. 

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

Также обратите внимание, что на одной странице не может быть двух элементов с одинаковым идентификатором, в настоящее время у вас естьdiv и вход, которые оба имеют идентификатор "opener".

Чтобы отправить пользователя на другую страницу после закрытия диалогового окна, вам необходимо добавить закрытый обратный вызов в диалоговое окно.См. Пример ниже: 

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

Замените "welcome_page.html" URL-адресом, на который должен быть направлен пользователь.

0 голосов
/ 26 августа 2011

К вашему последнему вопросу я заметил, что Internet Explorer не любит теги <form> между элементами в таблицах. 

<table border="0" cellspacing="0" cellpadding="5">
<form action="#">
<tr>
...
</tr>
</form>
</table>

Ваша форма может работать не так, как ожидалось в IE8, как это.Вам нужно переместить ваши <form> теги за пределы таблицы, такие как: 

<form action="#">
<table>
<tr>
...
</tr>
</table>
</form>
0 голосов
/ 26 августа 2011

Попробуйте: 

$( "#opener" ).click(function() {
   $( "#dialog" ).dialog( "open" ).delay(3000).fadeOut();
   return false; 
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...