0

我的网站上有一个简单的 jquery 模态框。我是 jquery 的新手，所以如果正在提交的表单上出现错误，我不确定如何保持该框打开。如果提交正确重定向。

截至目前，当出现错误时，它会重新加载页面，并且必须再次按下弹出窗口才能查看错误。

提前致谢。

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

1 回答 1

1

您需要使用 AJAX 来处理这个问题。如果您以 JSON 格式发回响应，则可以非常容易地解析它是否成功。

$('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;
});
于 2013-06-13T21:39:02.140 回答