使用PHP + Jquery隐藏和显示div时遇到问题

时间:2011-03-14 14:17:47

标签: php javascript jquery ajax

用户提交他们的电子邮件地址,检查电子邮件是否有效而不在数据库中。

我遇到的问题是,一旦表单成功提交,我就无法隐藏表单和谢谢你显示。它目前用“谢谢!”替换电子邮件文本框。我不想要的文字。

必须更改或添加哪些内容才能隐藏表单(在通过错误/验证检查后)并显示谢谢div?

谢谢!

的index.php

<?php

require "includes/connect.php";

$msg = '';

if($_POST['email']){

    // Requested with AJAX:
    $ajax = ($_SERVER['HTTP_X_REQUESTED_WITH']  == 'XMLHttpRequest');

    try{
        if(!filter_input(INPUT_POST,'email',FILTER_VALIDATE_EMAIL)){
            throw new Exception('Invalid Email!');
        }

        $mysqli->query("INSERT INTO coming_soon_emails
                        SET email='".$mysqli->real_escape_string($_POST['email'])."'");

        if($mysqli->affected_rows != 1){
            throw new Exception('You are already on the notification list.');
        }

        if($ajax){
            die('{"status":1}');
        }

        $msg = "Thank you!";

    }
    catch (Exception $e){

        if($ajax){
            die(json_encode(array('error'=>$e->getMessage())));
        }

        $msg = $e->getMessage();        
    }
}
?>


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Notify me test</title>

<link rel="stylesheet" type="text/css" href="css/styles.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="js/script.js"></script>

</head>

<body>

<div id="launch">

    <h1>Notify</h1>

    <h2>Notify me</h2>

    <form id="form" method="post" action="">
        <input type="text" id="email" name="email" value="<?php echo $msg?>" />
        <input type="submit" value="Submit" id="submitButton" />
    </form>

    <div style="display:none" id="thankyou">
    Thank you!
    </div>


</div>

</body>
</html>

的script.js

$(document).ready(function(){

    // Binding event listeners for the form on document ready

    $('#email').defaultText('Enter your Email Address');

    // 'working' prevents multiple submissions
    var working = false;

    $('#page form').submit(function(){

        if(working){
            return false;
        }
        working = true;

        $.post("./index.php",{email:$('#email').val()},function(r){
            if(r.error){
                $('#email').val(r.error);
            }
            else $('#email').val('Thank you!');

            working = false;
        },'json');

        return false;
    });
});

// A custom jQuery method for placeholder text:

$.fn.defaultText = function(value){

    var element = this.eq(0);
    element.data('defaultText',value);

    element.focus(function(){
        if(element.val() == value){
            element.val('').removeClass('defaultText');
        }
    }).blur(function(){
        if(element.val() == '' || element.val() == value){
            element.addClass('defaultText').val(value);
        }
    });

    return element.blur();
}

1 个答案:

答案 0 :(得分:2)

如果您不想用感谢文本替换输入,为什么要这样做?

else $('#email').val('Thank you!');
而是做 else { $("#form").hide(); $("#thankyou").show(); }