ansaurus

Question

Javascript/css/php/mysql to collect user email addresses in a div on a website.

Answer 1

+1 A:

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.

nickf 2009-03-31 00:32:28

+1 ... please don't use AJAX for the sake of it.

alex 2009-03-31 01:03:20

I agree to an extent - if AJAX fits your site design and behaviour though, I'd say use it. Not everything needs to be purely about functionality - we'd have some pretty ugly sites out there if it was.

Damovisa 2009-03-31 01:09:21

functionality doesn't *have* to be ugly... otherwise google would be ugly as hell :)you could even argue that functionality allows for beautiful, but beautiful doesn't necessarily allows for functionality

voyager 2009-03-31 02:02:30

Answer 2

+1 A:

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.

Seb 2009-03-31 00:34:12

Answer 3

+2 A:

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.

Damovisa 2009-03-31 01:04:41

+1 good starting point for him... Disect away, follow my JSON link to understand why the PHP is echo()'ing what it is.

alex 2009-03-31 01:21:49

Definitely - good point from Alex, don't follow this blindly cutting and pasting - make sure you understand what it's trying to do. It should definitely help you next time.

Damovisa 2009-03-31 01:28:43

Thanks so much! I was piecing it together using the tutorial linked to in the question but this was great to see it all put together like this. Very helpful. I went ahead and stole it pretty much verbatim (not totally blindly!), appending the email addresses to a flat file. http://centmail.net

dreeves 2009-03-31 01:40:08

Glad it helped :)

Damovisa 2009-03-31 01:51:39

Answer 4

+2 A:

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 to my knowledge 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.

alex 2009-03-31 01:05:42

I'm guessing the downvote has something to do with my Regex which some may deem too long and cyrptic? I didn't write it.

alex 2009-03-31 01:31:08

possibly because the filter_var($q, FILTER_VALIDATE_EMAIL) in php is easier? Remember, using regex means you now have two problems (http://www.codinghorror.com/blog/archives/001016.html) :)

Damovisa 2009-03-31 01:43:58

Only 2 problems if you don't already having a working regex. I'll update my answer. Thanks.

alex 2009-03-31 01:50:25

Wow just what I needed alex thanks!

Gab Royer 2009-06-26 12:44:18

ansaurus

tags:

views:

answers:

Javascript/css/php/mysql to collect user email addresses in a div on a website.

related questions