在表单提交后使模态窗口持续存在

我有一个带登录/注册表单的模式窗口。我想在提交两种表单之一后阻止模式窗口消失。任何ideea我该怎么做？在表单提交后使模态窗口持续存在

这里是我的jQuery代码：

$(document).ready(function(){ 
    $('#pop2').click(function(){ 
     var width=$(window).width(); 
    width = (width/2)-350; 
    $('.popup2').css('left',width+'px'); 

    var height=$(window).height(); 
    $('.popup2').css('top',(height/2)-(($('.popup2').height())/2)+'px'); 

     $('.trbg1').fadeIn('fast',function(){ 
     $('.popup2').fadeIn(); 
    }); 

    }); 

    $('.closep2').click(function(){ 
     $('.popup2').fadeOut('fast',function(){ 
      $('.trbg1').fadeOut(); 
     }); 
    }); 
});

这是我的HTML代码：

<div class="trbg1" style="display:none"></div> 
    <div class="popup2" style="display:none"> 
     <div class="ppad2"> 
      <a href="#" class="closep2"></a> 
      <div class="clear"></div> 
      <div class="popleft m4"> 
       <span>Sunt deja client:</span> 
       <form method="post" action=""> 
        <label class="label1">E-mail:</label> 
        <input type="text" class="inp1" id="lemail" /> 
        <label class="label1">Parola:</label> 
        <input type="text" class="inp1" id="lparola"/>     
        <input class="login" type="submit" value="Login"/> 
       </form> 
      </div> 

      <div class="popleft"> 
       <span>Sunt client nou:</span> 
       <form method="post" action=""> 
        <label class="label1">Nume:</label> 
        <input type="text" class="inp1" id="nume" /> 
        <label class="label1">Prenume:</label> 
        <input type="text" class="inp1" id="prenume"/> 
        <label class="label1">E-mail:</label> 
        <input type="text" class="inp1" id="iemail"/> 
        <label class="label1">Parola:</label> 
        <input type="text" class="inp1" id="iparola1"/> 
        <label class="label1">Reintrodu parola:</label> 
        <input type="text" class="inp1" id="liparola2"/> 

        <div class="m5"> 
         <input type="checkbox" style="float:left;" /> <label class="label2">I agree to the Membership Agreement.*</label> 
        </div> 
        <div class="m5"> 
         <input type="checkbox" style="float:left;" /> <label class="label2">Doresc sa primesc newsletter-ul periodic cu noutatile si campaniile exclusive icut.ro</label> 
        </div> 
        <br class="clear" /> 
        <input class="inreg" type="submit" value="Inregistrare"/> 
       </form> 
      </div> 

      <div class="clear"></div>        
     </div> 
    </div>

谢谢。你

来源

2010-09-19 Psyche

你应该使用：ajax http://api.jquery.com/jQuery.ajax/提交表格！ – 2010-09-19 16:12:04

要在模态窗口中显示的错误/成功的消息，你是最好的办法是通过AJAX提交，你可以展示你的回应，无论你喜欢使用jQuery。

例如：

给你的登录表单ID login1像这样：

<div class="popup2" style="display:none"> 
     <div class="ppad2"> 
      <a href="#" class="closep2"></a> 
      <div class="clear"></div> 
      <div class="popleft m4"> 
       <span>Sunt deja client:</span> 
       <form **id="login1"** method="post" action="">

然后添加到您的JS

$('#login1').submit(function(e) { 
e.preventDefault(); 
var procUrl = "ajax.php"; //you need to run ajax processing in an external file 
var formData = $(this).serialize(); 
var _this = this; 
$.ajax({ 
type: 'POST', 
url: procUrl, 
data: formData, 
success: function(response) { 
$('.popup2').html(response); 
} 
}) 
})

将从处理脚本添加输出你的模态，所以如果错误回声“你没有做这样那样的事情”;

你没有做这样的和这样的是什么会出现在你的模态。

这非常简单，但会为您提供ajax提交的起点。

来源

2010-09-19 16:11:52

感谢Liam。将做一个AJAX表单验证。 – Psyche 2010-09-21 20:35:52

两个选项：

通过AJAX，而不是一个普通的浏览器提交提交表单。
使用target属性提交表单到隐藏的iframe（例如，设置target属性表单上以匹配iframe中name属性）。当我做后者时，我通常会使用一个cookie告诉我何时结果已经回来，并且查询cookie以及iframe的内容（但是我通常在尝试提交开始时进行此操作下载过程，因此成功的cookie —，根本没有写入iframe的东西）。

来源

2010-09-19 16:01:58

但是，如果我将表单提交给隐藏的iframe，我将能够在该模式窗口中显示错误消息吗？ – Psyche 2010-09-19 16:04:55

@Psyche：当然，只要从iframe的文档（或cookie，无论你喜欢什么）阅读它们并将它们呈现在你的模式盒中。我就是做这个的。 – 2010-09-19 16:19:40

我建议使用jQuery Form plugin，这可以很容易地通过Ajax提交表单。

除了做阿贾克斯-Y的东西，它可以让你捕捉到你的服务器的响应，所以你可以做这样的事情的错误处理和验证，同时离开模式打开。

来源

2010-09-19 16:18:42

在表单提交后使模态窗口持续存在

回答

相关问题