设置jquery按钮而不是php错误和成功状态答案

【问题标题】：Set jquery button instead of php error and success status设置jquery按钮而不是php错误和成功状态
【发布时间】：2015-05-04 00:24:36
【问题描述】：

这是我的 index.html：

<body>

        <div id="newsletterform">
            <div class="wrap">
                <h3>Get Email Update</h3>
                <form action="send.php" method="post" id="newsletter" name="newsletter">
                    <input type="email" name="signup-email" id="signup-email" value="" placeholder="Insert email here" />
                    <button class="btn btn-7 btn-7h icon-envelope">Submit form</button>

                    <span class="arrow"></span>
                </form>
                <div id="response"></div>
            </div>
        </div>

 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="assets/js/lib.js"></script>
      </body>

这是我的 send.php：

<?php

$host   = "";
$dbname = "";
$user   = "";
$pass   = "";

$email    = filter_var($_POST['signup-email'], FILTER_SANITIZE_EMAIL);
$datetime = date('Y-m-d H:i:s');

try {
    $db = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);

    if (empty($email)) {
        $status = "error";
        $message = "The email address field must not be blank";
    } else if (!preg_match('/^[^0-9][A-z0-9._%+-]+([.][A-z0-9_]+)*[@][A-z0-9_]+([.][A-z0-9_]+)*[.][A-z]{2,4}$/', $email)) {
        $status = "error";
        $message = "You must fill the field with a valid email address";
    } else {
        $existingSignup = $db->prepare("SELECT COUNT(*) FROM signups WHERE signup_email_address='$email'");
        $existingSignup->execute();
        $data_exists = ($existingSignup->fetchColumn() > 0) ? true : false;

        if (!$data_exists) {
            $sql = "INSERT INTO signups (signup_email_address, signup_date) VALUES (:email, :datetime)";
            $q = $db->prepare($sql);
            $q->execute(
                array(
                    ':email' => $email,
                    ':datetime' => $datetime
            ));

            if ($q) {
                $status = "success";
                $message = "You have been successfully subscribed";
            } else {
                $status = "<button class="btn btn-7 btn-7h icon-envelope">Submit form</button>";
                $message = "An error occurred, please try again";
            }
        } else {
            $status = "<button class="btn btn-7 btn-7h icon-envelope">Submit form</button>";
            $message = "This email is already subscribed";
        }
    }

    $data = array(
        'status' => $status,
        'message' => $message
    );

    echo json_encode($data);

    $db = null;
}
    catch(PDOException $e) {
    echo $e->getMessage();
}
?>

我已经使用 html、php 和 sql 创建了订阅表单。

它工作正常，现在我需要更新，使用错误和成功按钮而不是显示错误或成功消息。

所以我创建了两个按钮，即错误和成功，现在我需要在我的索引页面中添加。如果我输入错误的电子邮件 ID 或空白或重复的邮件 ID 表示，它会显示错误按钮或成功按钮。

按钮应该是这样的：我已经在jsfiddle中创建了：http://jsfiddle.net/b9y5bunp/3/

请问，如何实现这一点，在此先感谢。

【问题讨论】：

应该是这样的。 "<button class='btn btn-7 btn-7h icon-envelope'>Submit form</button>";
您已经将按钮分配给status变量，您不能根据错误或成功的位置添加CSS类吗？
我添加了@Lepanto：但它不起作用..
你能用你现在的代码更新上面的代码吗
@Ranjith：没用..

标签： javascript php jquery html

【解决方案1】：

在 PHP 中设置 $status 的结果是 'error' 还是 'success'

    if (!$data_exists) {
        $sql = "INSERT INTO signups (signup_email_address, signup_date) VALUES (:email, :datetime)";
        $q = $db->prepare($sql);
        $q->execute(
            array(
                ':email' => $email,
                ':datetime' => $datetime
        ));

        if ($q) {
            $status = "success";
            $message = "You have been successfully subscribed";
        } else {
            $status = "error";
            $message = "An error occurred, please try again";
        }
    } else {
        $status = "error";
        $message = "This email is already subscribed";
    }

在 HTML 中，向按钮添加 id，例如 id="actbtn"

<button id="actbtn" class="btn btn-7 btn-7h icon-envelope">Submit form</button>

在 Javascript 中，将 ajax 请求更新为以下

$(document).ready(function () { 
    $('#newsletter').submit(function () { 
        var $this = $(this), 
        $response = $('#response'), 
        $mail = $('#signup-email'), 
        testmail = /^[^0-9][A-z0-9._%+-]+([.][A-z0-9_]+)*[@][A-z0-9_]+([.][A-z0-9_]+)*[.][A-z]{2,4}$/, 
        hasError = false; 

        $response.find('p').remove(); 

        if (!testmail.test($mail.val())) {
            $('#actbtn').removeClass('btn-error').addClass('btn-error');
            //$response.html('<p class="error">Please enter a valid email</p>'); 
            hasError = true; 
        } 

        if (hasError === false) { 
            $response.find('p').remove(); 
            $response.addClass('loading'); 

            $.ajax({ 
                type: "POST", 
                dataType: 'json', 
                cache: false, 
                url: $this.attr('action'), 
                data: $this.serialize(),
                success: function(data){
                    if(data!=''){
                        $response.removeClass('loading'); 
                        if(data.status == 'success'){
                            $('#actbtn').removeClass('btn-error').addClass('btn-success');
                        }
                        else{
                            $('#actbtn').removeClass('btn-error').addClass('btn-error');
                        }
                    }
                }           
            });
        } 

        return false; 
    }); 
});

【讨论】：