All geek questions in one place

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

Suppose you want your site to have a box that says “Give us your email address and we will send you news” or something like that. What is a simple / elegant way to collect these email addresses (assuming the standard LAMP stack)? In particular, I would like to receive recommendations on

  • Javascript to handle the user interface (complain about an invalid email address, say thanks when they press enter, etc.).
  • CSS to make it look decent.
  • PHP really collects email addresses and stores them (either a flat file or a database in order).

Or, if there is a fancy Rails or AJAX way to do this, I am also very open to this.

(All I know at the moment is to do it in the old-school CGI way with a simple html web form with a submit button and a server side script that takes the form content, pulls out an email address, and spits out html (maybe redirects back to source page).

If I am naive in thinking, I can take something off the shelf for this and should start with something like an AJAX tutorial, let me know. I saw this jQuery / AJAX tutorial . Is this, or something, the fastest way to run a simple registration form?

+2
source share
4

- . , , . , .

, 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/> ..

+4

, 99%

/^(("[\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

, ! Damovisa, , PHP filter_var($email, FILTER_VALIDATE_EMAIL).

, PHP ( ), , JavaScript.

AJAX, , JSON.

jQuery AJAX, , .

+4

, AJAX. , . CGI.

+1

I don’t think you will find something like “turn it on, and everything will work magically”, but you can get it as soon as possible with the standard implementation of LAMP + jQuery:

  • User Interface: With regular expressions, you can easily check your emails. Google for this and you will find many scripts.
  • AJAX: jQuery AJAX methods are great, so I recommend this.
  • With PHP, it's pretty easy to get AJAX'd parameters and paste them into the database.
+1
source

Source: https://habr.com/ru/post/1726154/

More articles:


All Articles