Javascript/css/php/mysql To Collect User Email Addresses In A Div On A Website
Solution 1:
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:
<scripttype="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;
returnfalse;
});
$('#emailAddress').keyup(function(e) {
if(e.keyCode == 13) {
$('#btnSubmit').click();
}
returnfalse;
});
});
</script></head><body><divstyle="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 /><inputtype="text"id="emailAddress"size="40"style="border:1px solid gray;padding:5px;"/><inputtype="button"id="btnSubmit"value="Submit"style="padding:5px;" /><divstyle="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.
Solution 2:
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.
Solution 3:
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.
Solution 4:
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.
Post a Comment for "Javascript/css/php/mysql To Collect User Email Addresses In A Div On A Website"