Making a modal window persist after form submission

Question

Hello,

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.

Answer 1

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.

Answer 2

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.