Javascript / css / php / mysql在网站的div中收集用户电子邮件地址 [英] Javascript/css/php/mysql to collect user email addresses in a div on a website

问题描述

假设您想要在网站上显示「提供您的电子邮件地址，我们会传送您新闻」的方块。什么是简单/优雅的方式来收集这些电子邮件地址（假设标准LAMP堆栈）？特别是，我想要建议

1. JavaScript处理用户界面（抱怨如果电子邮件地址无效，


2. PHP实际收集电子邮件地址并存储它们（无论是平面文件还是数据库都很好） ）。

或者如果有一个漂亮的Rails或AJAX方法来做到这一点，我也很开放。 p>

（我目前知道的是如何做这个老式的CGI方式，一个带有提交按钮的纯HTML表单和一个服务器端脚本，内容，拉出电子邮件地址，并输出html（可能会重定向回原始页面）。）

如果我天真地想我可以抓关于这一点，应该开始像一个AJAX教程，让我知道，以及。我看过这个JQuery / AJAX教程推荐。

解决方案

我刚刚实现了一个简单的注册表单，像这样在我的一个网站奇怪地足够。我没有存储电子邮件地址，但我通过电子邮件发送给自己。

这是我的实现，使用 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.gifborder =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'）。 b $ b} 
 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黑色> 
如果您在我们推出时希望收到通知，请在这里留下您的电子邮件地址。< br />< br /> 
< input type =textid =emailAddresssize =40style =border：1px solid gray; padding：5px;/> 
< input type =buttonid =btnSubmitvalue =Submitstyle =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'] ='给定的电子邮件无效 - 请重试'; 
} 
 else 
 {
 //写入文件或数据库
 
 $ response ['result'] = 1; 
 $ response ['message'] =谢谢，您的详细信息已添加，我们会在我们启动时通知您！ 
} 
} 
 
 echo json_encode（$ response）; 
？> 
  

编辑：我知道这不是漂亮的内联样式，< br /> 标签等。

Suppose you want a box on your website that says "Give us your email address and we'll send you news" or somesuch. What's a simple/elegant way to collect those email addresses (assuming a standard LAMP stack)? In particular, I'd like recommendations on

1. Javascript to handle the UI (complain if invalid email address, say thanks when they hit enter, etc).
2. CSS to make it look decent.
3. PHP to actually collect the email addresses and store them (either flat file or database is fine).

Or if there's a fancy Rails or AJAX way to do this, I'm very open to that, too.

(All I know currently is how to do this the old-school CGI way, with a plain html web form with a submit button and a server-side script that takes the form contents, pulls out the email address, and spits out html (potentially a redirect back to the original page).)

If I'm naive in thinking I can grab something off the shelf for this and should be starting with something like an AJAX tutorial, let me know that as well. I've seen this JQuery/AJAX tutorial recommended. Is that or something like it the quickest way to get a simple sign-up form up and running?

解决方案

I just implemented something like this on one of my websites strangely enough. I didn't store the email addresses though, I emailed them to myself. I'll comment that bit out so you can write your flat-file or database storage bits.

Here's my implementation, using jQuery. Steal away :)

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

In the notify.php file:

<?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);
?>

Edit: I know it's not pretty - inline styles, <br/> tags, etc.

这篇关于Javascript / css / php / mysql在网站的div中收集用户电子邮件地址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！