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

【问题标题】：How to add button instead of error status and success message in php?如何在php中添加按钮而不是错误状态和成功消息？
【发布时间】：2015-03-03 04:54:13
【问题描述】：

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

HTML：

 <div id="newsletterform">
                <h2>Get Email Update</h2>
                <form action="send.php" 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">
                    <span class="arrow"></span>
                </form>
                <div id="response"></div>
            </div>

现在我发现了一些按钮的点击效果，这是链接，http://tympanus.net/Development/CreativeButtons/

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

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

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

请问，有没有可能实现呢？

任何帮助将不胜感激。

【问题讨论】：

为什么不直接将required 添加到<input> 中？您无需在客户端检查它是否为空。
你能提供解释吗@AfaanBilal：谢谢
将<input type="email" name="signup-email" id="signup-email" value="" placeholder="Insert email here" /> 替换为<input type="email" required name="signup-email" id="signup-email" value="" placeholder="Insert email here" />。
这是我不需要的。我需要使用按钮效果而不是消息状态。
检查我的回答是否符合您的预期。

标签： javascript php jquery html

【解决方案1】：

有一种简单的方法可以让你同时放置两个按钮并将错误按钮提供给 css display:none; 和 jquery 一样

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

这样你就可以实现你想要的

【讨论】：

我只是给出了一个示例 css 类，您可以根据需要更改它
然后你可以下载它并添加到你的文件中确保它不会影响你的另一个 js

【解决方案2】：

下载component.css并将其放入css文件夹，然后将其添加到<head>：

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

HTML：

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

并在关闭之前放置</body>：

<?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 } ?>

将以下内容放在您的footer.php 或index.php 的顶部（您在其中include() footer.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();
    }
}
?>

也看看这里：

http://jsfiddle.net/8ft0ye6k/3/

希望对你有帮助。

【讨论】：

当然你需要 send.php，我假设你以某种方式将$error 传递回 html 页面。你为什么不把php代码和你的html放在同一个文件中，然后它会自动工作。
那请问classie.js和default.css呢？
你不需要它们。它们是针对那个演示的。
但现在我仍然没有得到，它保持不变。 @Afaan Bilal：谢谢
将表单的 action 属性设置为 "" 并将您的 php 代码放在与您的 html 相同的文件的顶部（确保它以 .php 结尾）。将您的 php 代码包装在 if(isset()) 语句中。那么它应该可以工作了。

【解决方案3】：

使用这个Demo Here

添加这个 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";

【讨论】：

这里是更新的演示 jsfiddle.net/b9y5bunp/3 .. 那么如何将它用于我现有的订阅表单？谢谢
在你调用 ajax 函数的主页面中包含你的 javascript 代码@rish 明白了吗？