Javascript 如何在php中添加按钮而不是错误状态和成功消息？

我已经用php创建了订阅按钮

Html:

获取电子邮件更新

现在我发现了一些按钮的点击效果，这里是链接

在上面的第7部分[绿色部分]中，它有两个提交表单按钮

一个表示成功，一个表示错误，所以我需要在订阅表单中使用它们，我的意思是移动到我的send.php

所以，当我单击“订阅”按钮而不输入电子邮件时，它会显示“错误”按钮，而不是通知

我想知道，有可能做到这一点吗

非常感谢您的帮助。

请使用此功能

添加这个css和js，应该可以

<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/CreativeButtons/css/default.css" />
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/CreativeButtons/css/component.css" />
<script src="http://tympanus.net/Development/CreativeButtons/js/modernizr.custom.js"></script>

<script src="http://tympanus.net/Development/CreativeButtons/js/classie.js"></script>



 $status = "<button class="btn btn-1 btn-1a">Button</button>";
 $message = "An error occurred, please try again";

 $status = "<button class="btn btn-1 btn-1a">Button</button>";
 $message = "This email is already subscribed";

$status=“按钮”；
$message=“发生错误，请重试”；
$status=“按钮”；
$message=“此电子邮件已订阅”；

有一种简单的方法来显示，因此您可以同时放置两个按钮，并将错误按钮赋予css

显示：无
就像jquery一样

else {
            $status = "error";
            $message = "An error occurred, please try again";
            $('.button-error').show();
            $('.button-success').hide();
        }

通过这种方式，您可以实现所需的功能
下载并将
component.css
放置在
css
文件夹中，然后将其添加到
：

请看这里：


希望有帮助。
为什么不在
中添加
必需的
？您不需要在客户端检查它是否为空。请@AfaanBilal:thanksReplace
提供解释。这是我不需要的。。我需要使用按钮效果来代替消息状态。检查我的答案是否符合您的要求。我只给出了一个css类示例，您可以根据需要更改它，然后您可以下载它并添加到您的文件中，确保它不会影响到您的另一个JSOf。当然，您需要send.php，我假设您以某种方式将
$error
传递回html页面。为什么不把php代码和html放在同一个文件中，它就会自动工作。那么我想知道，classie.js和default.css呢？你不需要它们。他们是专门为那个演示设计的。但现在我还是没明白，它还是一样的@Afaan Bilal：感谢将表单的action属性设置为“”，并将php代码放在与html相同的文件顶部（确保它以.php结尾）。用if（isset（））语句包装php代码。然后它应该会工作。这里是更新的演示。。那么如何在我现有的订阅表单中使用它呢？谢谢把你的javascript代码放在主页上，你在主页上调用ajax函数@rish，明白了吗？
else {
            $status = "error";
            $message = "An error occurred, please try again";
            $('.button-error').show();
            $('.button-success').hide();
        }

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

     <div id="newsletterform">
            <h2>Get Email Update</h2>
            <form method="post" id="newsletter" name="newsletter">
                <input type="email" name="signup-email" id="signup-email" value="" placeholder="Insert email here" />
                <input type="submit" value="Subscribe" name="signup-button" id="signup-button" class="btn btn-7 btn-7h icon-envelope">
                <span class="arrow"></span>
            </form>
            <div id="response">
            <?php if (isset($_POST['signup-button']) { ?>
                <span color="<?=($status=='success')?'green':'red';?>"><?=$message;?></span>
            <?php } ?>
            </div>
        </div>

<?php if ($status == "error") { ?>
<script>
    document.getElementById('signup-button').className = "btn btn-7 btn-7h icon-envelope btn-error";
    setTimeout(function() {
            document.getElementById('signup-button').className = "btn btn-7 btn-7h icon-envelope";
    }, 1000);
</script>
<?php } ?>

<?php
if (isset($_POST['signup-button'])) {
    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 = "error";
                    $message = "An error occurred, please try again";
                }
            } else {
                $status = "error";
                $message = "This email is already subscribed";
            }
        }
        $data = array(
            'status' => $status,
            'message' => $message
        );

        echo json_encode($data);

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