Javascript/css/php/mysql to collect user email addresses in a div on a website [closed]

StackOverflow https://stackoverflow.com/questions/699577

Question

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?

Was it helpful?

Solution

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.

OTHER TIPS

Here is a regex that will validate 99% of emails

/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i

It looks a bit cryptic, but it works! As Damovisa stated in the comments, it is easier to use PHP's filter_var($email, FILTER_VALIDATE_EMAIL) function.

Note if you are validating the email before you send it to PHP (for an ultra speedy validation), you will need to use a regex as there are no built in functions inside JavaScript to do this for you.

If you do use AJAX, you should have it return a success or error report using JSON.

The jQuery library can help you out a lot when using AJAX, but it's still important to understand how it works.

If the only function is for the users to enter an email address, I see no reason to bother with AJAX. It's not as if a page refresh is going to break the workflow of your users. Stick with the plain old CGI way of doing it.

I don't think you'll find something like "include this and everything will work magically", but you can have it ready in no time with a standard LAMP + jQuery implementation:

  • UI: using regex you can easily validate e-mails. Google for that and you'll find tons of scripts.
  • AJAX: jQuery AJAX methods are great, so I'd recommend that.
  • With PHP is pretty easy to fetch your AJAX'd parameters and insert into the DB.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top