How do I keep jquery modal box open when the form inside poses an error?

Question

I have a simple jquery modal box on my site. I'm new at jquery so I'm not sure how to keep the box open if an error is posed on the form that is being submitted. If submitted correctly redirect.

As of now when there is an error it reloads the page and have to press pop up again to view error.

Thanks in advance.

if(isset($_POST['submit'])) {
    $email = $_POST['email'];
    if(empty($_POST['name']) || empty($_POST['email'])) { 
        $error = "Please enter the info in the fields that are marked <br /> with &#042;";
    }elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)){
        $error_email = "Please enter a valid email address";
    }else{
        $success = true;
$success = "Thank You"; 



     mysql_query("INSERT INTO watch_list 
    (name, email) VALUES('".$_POST['name']."', '".$_POST['email']."')") 
    or die(mysql_error());  
    header( 'Location: /watch.php' );
    }

}       

<div class="play_wrapper">
                <div class="play">
                    <a href="#" class="topopup"><img src="/styles/images/lx_play.png"/></a>
                        <div id="toPopup">
                            <div id="popup_content">
                                <div class="vid_form_text">
                                    Please enter your name and email to watch the film. <span class="green">Thank you.</span> 
                                </div>
                                <?php if(isset($success)) { ?>
                                <div class="success_watch">Thank You!</div>
                                <?php } ?>

                                <?php if(isset($error)) { ?>
                                <div class="error_watch">
                                    <?php echo $error; ?>
                                </div>
                                <?php } ?>
                                <?php if(isset($error_email)) { ?>
                                <div class="error_watch">
                                    <?php echo $error_email; ?>
                                </div>
                                <?php } ?>
                                <form method="post" action="#">
                                    <div class="form_text_sign_up_required">
                                        All fields marked with an asterisk * are required
                                    </div>
                                    <div class="form_text_sign_up">
                                        Name&#042;
                                    </div>
                                    <input type="text" name="name" value="<?php if(isset($_POST['name'])) {echo $_POST['name'];} ?>" /> <br /><br />

                                    <div class="form_text_sign_up">
                                        Email&#042;
                                    </div>
                                    <input type="text" name="email" value="<?php if(isset($_POST['email'])) { echo $_POST['email'];} ?>" /><br /><br /> 
                                    <input type='submit' name='submit' value='submit' class='post'/>
                                </form>

                            </div> <!--your content end-->
                        </div> <!--toPopup end-->
                        <div class="loader"></div>
                    <div id="backgroundPopup"></div>
                </div>
            </div>

<script>
    jQuery(function($) {

        $("a.topopup").click(function() {
                loading(); // loading
                setTimeout(function(){ // then show popup, deley in .5 second
                    loadPopup(); // function show popup
                }, 500); // .5 second
        return false;
        });

        /* event for close the popup */
        $("div.close").hover(
                        function() {
                            $('span.ecs_tooltip').show();
                        },
                        function () {
                            $('span.ecs_tooltip').hide();
                        }
                    );

        $("div.close").click(function() {
            disablePopup();  // function close pop up
        });

        $(this).keyup(function(event) {
            if (event.which == 27) { // 27 is 'Ecs' in the keyboard
                disablePopup();  // function close pop up
            }
        });

            $("div#backgroundPopup").click(function() {
            disablePopup();  // function close pop up
        });

        $('a.livebox').click(function() {
            alert('Hello World!');
        return false;
        });

         /************** start: functions. **************/
        function loading() {
            $("div.loader").show();
        }
        function closeloading() {
            $("div.loader").fadeOut('normal');
        }

        var popupStatus = 0; // set value

        function loadPopup() {
            if(popupStatus == 0) { // if value is 0, show popup
                closeloading(); // fadeout loading
                $("#toPopup").fadeIn(0500); // fadein popup div
                $("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
                $("#backgroundPopup").fadeIn(0001);
                popupStatus = 1; // and set value to 1
            }
        }

        function disablePopup() {
            if(popupStatus == 1) { // if value is 1, close popup
                $("#toPopup").fadeOut("normal");
                $("#backgroundPopup").fadeOut("normal");
                popupStatus = 0;  // and set value to 0
            }
        }
        /************** end: functions. **************/
    }); // jQuery End
    </script>

Answer 1

You'll want to handle this using AJAX. If you send the response back in JSON format, it makes it super easy to parse out if it was successful or not.

$('form').on('submit', function(e) {

    var form = $('form')[0];
    var data = new FormData(form);

    // http://api.jquery.com/jQuery.ajax/
    $.ajax({
        url : 'Your URL',
        data : data,
        type: 'POST',
        errror : function(xhr, status, err) {console.log(xhr, status, err);}, // This only gets thrown if form submits unsucessfully
        success: function(response, status) {
                // This assumes the response you're sending back from PHP is JSON
                var data = JSON.parse(response);

                if (data.error) {
                    // Handle form being unsuccessful
                } else {
                    // Handle success
                }
            }
    });

    // This is to prevent the form from actually submitting.
    e.preventDefault();
    return false;
});