Making a modal window persist after form submission

I have a modal window with a login/sign-up form. I would like to prevent the modal window from disappearing after I submit one of the two forms. Any ideea how can I do that?

Here's my jQuery code:

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

And here is my HTML code:

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

Thank you.

To display your error/success messages in the Modal window, you're best bet is to submit via AJAX as you can display your response wherever you like using jQuery.

For instance:

Give your login form the id login1 like so:

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

Then add this to your 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);
}
})
})

That will add the output from the processing script to your modal, so if error echo "you didn't do such and such";

you didn't do such and such is what will appear in your modal.

This is very simple but will give you a starting point for ajax submissions.

Two options for you:

1. Submit the form via ajax rather than a normal browser submission.

2. Submit the form to a hidden iframe using the target attribute (e.g., set the target attribute on the form to match the name attribute on the iframe). When I do the latter, I usually use a cookie to tell me when the result has come back, and poll for the cookie as well as the content of the iframe (but I'm usually doing this when trying to have the submission start a download process, hence the cookie — on success, there will be nothing written to the iframe at all).

I'd suggest using the jQuery Form plugin, which makes it easy to submit the form via Ajax.

In addition to doing the Ajax-y stuff, it allows you to capture your server's response, so you can do things like error handling and validation while leaving the modal open.