在表單提交後使模態窗口持續存在

我有一個帶登錄/註冊表單的模式窗口。我想在提交兩種表單之一後阻止模式窗口消失。任何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

在表單提交後使模態窗口持續存在

回答

相關問題