javascript/css/php/mysql 在网站的div中收集用户邮箱地址

标签 javascript css ajax webforms lamp

<分区>

假设您想要在您的网站上显示一个框,上面写着“请提供您的电子邮件地址,我们会向您发送新闻”或类似内容。收集这些电子邮件地址的简单/优雅方法是什么(假设是标准的 LAMP 堆栈)?特别是,我想要关于

的建议
  1. 用于处理 UI 的 Javascript(如果电子邮件地址无效则投诉,在他们按下回车键时表示感谢等)。
  2. CSS 使其看起来不错。
  3. 实际收集电子邮件地址并存储它们的 PHP(平面文件或数据库都可以)。

或者,如果有一种奇特的 Rails 或 AJAX 方式来做到这一点,我也很乐意接受。

(我目前所知道的是如何用老式的 CGI 方式做到这一点,使用带有提交按钮的纯 html 网络表单和采用表单内容的服务器端脚本,提取电子邮件地址,然后吐出输出 html(可能重定向回原始页面)。)

如果我天真地认为我可以为此获取一些现成的东西并且应该从 AJAX 教程之类的东西开始,那么也请告诉我。我看过this JQuery/AJAX tutorial受到推崇的。这是启动和运行简单注册表单的最快方法吗?

最佳答案

我刚刚在我的一个网站上实现了这样的东西,这很奇怪。虽然我没有存储电子邮件地址,但我将它们通过电子邮件发送给自己。我会注释掉该位,以便您可以编写您的平面文件或数据库存储位。

这是我的实现,使用 jQuery .偷走:)

在 HTML 中:

<script type="text/javascript">
    $(document).ready(function(){
    $('#btnSubmit').click(function(){
    $('#btnSubmit').disabled = true;
    var val = $('#emailAddress')[0].value;
    $('#emailResponse').html('<img src="ajax-loader.gif" border="0" />').css('backgroundColor', 'ffffd0');
    $.getJSON('notify.php',{email: val}, function(data){
        if (!data.result) {
            $('#emailResponse').html(data.message).css('backgroundColor','ff9999').effect('highlight', {color: '#ffff99'}, 1000);
        } else {
            $('#emailResponse').html(data.message).css('backgroundColor','99ff99').effect('highlight', {color: '#ffff99'}, 1000);
        }
        });
            $('#btnSubmit').disabled = false;
            return false;
    });
$('#emailAddress').keyup(function(e) {
    if(e.keyCode == 13) {
        $('#btnSubmit').click();
    }
    return false;
});
});

</script>

</head>
<body>
    <div style="margin:0 auto;background:#ffffd0;width:500px;padding:10px;text-align:center; font-family:Verdana,Arial,sans-serif; border:1px solid black;">
    If you would like to be notified when we launch, please leave your email address here.<br /><br />
    <input type="text" id="emailAddress" size="40" style="border:1px solid gray;padding:5px;"/>
    <input type="button" id="btnSubmit" value="Submit" style="padding:5px;" />
    <div style="padding:10px;margin:10px;" id="emailResponse"></div>
</div>
</body>

在 notify.php 文件中:

<?php
$q = html_entity_decode($_GET["email"]);

$response = array();

if (!filter_var($q, FILTER_VALIDATE_EMAIL))
{
    $response['result'] = 0;
    $response['message'] = 'Invalid email given - try again';
}
else
{
    // write to file or database

    $response['result'] = 1;
    $response['message'] = "Thanks, your details have been added, we'll notify you when we launch!";
    }
}

echo json_encode($response);
?>

编辑:我知道它不漂亮 - 内联样式,<br/>标签等

关于javascript/css/php/mysql 在网站的div中收集用户邮箱地址,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/699577/

相关文章:

css - 悬停一个元素会影响另一个元素。不是 sibling 也不是 child

html - float div 提供不同高度的列

javascript - 我如何在 2 个函数中使用相同的私有(private)变量

javascript - 缩放也算作窗口大小调整吗?

javascript - 如何使用ajax检查数据库中是否已存在电子邮件?

html - 3 张相同尺寸但样式相同的图片 - 一张看起来尺寸略有不同

javascript - Flash 内容替换为 javascript document.getElemendByID ("id").innerHTML

php - 序列化形式 Symfony2 上的 json_decode

javascript - 具有可编辑输入的 HTML5 输入颜色

javascript - 意外的标记 - JSX 中的 JavaScript 表达式