Javascript / css / php / mysql per raccogliere indirizzi e-mail degli utenti in un div su un sito web [chiusa]

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

Domanda

Si supponga di voler una scatola sul tuo sito web che dice "Dacci il tuo indirizzo email e ti invieremo notizie" oppure somesuch. Che cosa è un modo semplice / elegante per raccogliere quegli indirizzi di posta elettronica (assumendo uno stack LAMP standard)? In particolare, mi piacerebbe raccomandazioni su

  1. JavaScript per gestire l'interfaccia utente (lamentarsi se l'indirizzo e-mail valido, dire grazie quando hanno colpito entrare, ecc).
  2. CSS per farlo sembrare decente.
  3. PHP per raccogliere in realtà gli indirizzi email e li (sia file flat o un database va bene) memorizzare.

O se c'è un Rails fantasia o AJAX modo per fare questo, io sono molto aperto a questo, anche.

(Tutto quello che so è attualmente come fare questo il modo in CGI vecchia scuola, con un modulo web semplice HTML con un pulsante di invio e di uno script lato server che prende il contenuto del modulo, tira fuori l'indirizzo di posta elettronica, e sputa out html (potenzialmente un reindirizzamento alla pagina originale).)

Se io sono ingenuo nel pensare che posso prendere qualcosa dallo scaffale per questo e dovrebbe essere a partire con qualcosa come un tutorial AJAX, me lo faccia sapere che pure. Ho visto questo JQuery / AJAX esercitazione raccomandato. E 'questo o qualcosa di simile il modo più rapido per ottenere una semplice iscrizione formare installato e funzionante?

È stato utile?

Soluzione

Ho appena implementato qualcosa di simile su uno dei miei siti web stranamente. Non ho memorizzare gli indirizzi di posta elettronica, però, ho spedito a me stesso. Io commento che po 'fuori in modo da poter scrivere i bit file flat o di archiviazione di database.

Ecco la mia realizzazione, utilizzando jQuery . Ruba lontano:)

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

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

Modifica:. Lo so che non è abbastanza - stili inline, tag <br/>, etc

Altri suggerimenti

Ecco una regex che convaliderà il 99% delle e-mail 

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

Sembra un po 'criptico, ma funziona! Come Damovisa dichiarato nei commenti, è più facile da usare la funzione filter_var($email, FILTER_VALIDATE_EMAIL) di PHP.

Nota se si sta convalidando l'e-mail prima di inviarlo a PHP (per una validazione ultra veloce), è necessario utilizzare un'espressione regolare in quanto vi sono non costruito nelle funzioni all'interno JavaScript per fare questo per voi.

Se utilizzati AJAX, si dovrebbe avere restituire un rapporto di successo o errore utilizzando JSON .

Il rel="nofollow noreferrer"> jQuery biblioteca

Se l'unica funzione è per gli utenti di inserire un indirizzo email, non vedo alcuna ragione di preoccuparsi con AJAX. Non è come se un aggiornamento della pagina sta per rompere il flusso di lavoro degli utenti. Stick con la pianura vecchio modo CGI di farlo.

Non credo che troverete qualcosa come "includere questo e tutto funzionerà magicamente", ma si può avere pronto in poco tempo con una lampada standard + implementazione jQuery:

  • Interfaccia utente: usando espressioni regolari si può facilmente convalidare e-mail. Google per questo e troverete tonnellate di script.
  • AJAX: metodi jQuery AJAX sono grandi, quindi consiglierei che
    • .
  • Con PHP è abbastanza facile per andare a prendere i parametri AJAX'd e inserire nel DB.
Non affiliato a StackOverflow
scroll top