dyatesupnorth
dyatesupnorth

Reputation: 830

AJax + PHP + MYSQL Newsletter subscriber

Currently I am able to add a new email address to my newsletter table, however I am struggling with the AJAX part of the query, ie. the validation.

Below is my Signup.php file:

<?php

require_once('required/init.php');
    require_once('required/settings.php');
    require_once('required/database.php');
    require_once('required/class.phpmailer.php');
    require_once('required/globals.php');
    $email  = trim($_REQUEST["email"]);
    //  Check if subscriber exists
    $SQL= "select email from tblnewsletter where email='".$email."'";
    $result = mysql_query($SQL);
    if(!$result) {die('Problem in SQL: '.$SQL);}    //just checking if there was a problem with your query

    if (mysql_num_rows($result)==1) {   // he was subscribed already
        echo 'You are subscribed.';         // Change the message if you want.
    }
    else {          // does not exist ==> add to the table
        $SQL2= "INSERT into tblnewsletter (email) VALUES ('".$email."')";
        mysql_query($SQL2);
        echo 'Thank you for subscribing';   // Change the message if you want.
    }

?>

and here is my Javascript:

<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $('#nlsubmit').on('click', function() {
            signup();
            return false;
        });
    });


    function trim(str) {
        str = str.replace(/^\s*$/, '');
        return str;
    }

    function signup()
    {
        var emailentered = $("#email").val();
        var email = trim(emailentered);

        //EMAIL VALIDATION
        var goodEmail = email.match(/\b(^(\S+@).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\.info)|(\.sex)|(\.biz)|(\.aero)|(\.coop)|(\.museum)|(\.name)|(\.pro)|(\.arpa)|(\.asia)|(\.cat)|(\.int)|(\.jobs)|(\.tel)|(\.travel)|(\.xxx)|(\..{2,2}))$)\b/gi);
        var apos = email.indexOf("@");
        dotpos = email.lastIndexOf(".");
        lastpos = email.length - 1;
        var badEmail = (apos < 1 || dotpos - apos < 2 || lastpos - dotpos < 2);
        if (email == "" || !goodEmail || badEmail)
        {
            //Email address fails
            $('myResponse').style.display = 'inline';
            $('myResponse').style.color = 'red';
            alert('Please enter a valid email');
            $('email').focus();
            return false;
        }
        else
        {
            email = encodeURIComponent(email);
            //Email address succeeds
            $.ajax({
                url: "signup.php?email=" + email,
                success: function(result) {
                    alert('here');
                    $('#myResponse').show();
                    $("loading").show();
                    return false;
                }
            });
        }
    }
    function showResponse(req) {
        $("loading").hide();
        $("myResponse").innerHTML = req.responseText;
        $("myResponse").style.display = "inline";
        $("myResponse").style.color = "blue";
        $("submit").show();
        $("email").invoke('clear');
    }
    function showException(req) {
        $("myResponse").innerHTML = req.responseText;
        alert("An error occured while talking to the server. Please try again.");
        $("loading", "myResponse").invoke('hide');
        $("submit").show();
        $("email").invoke('clear');
    }
</script>

The form that is calling all this is as follows:

<form method="post" name="subform" id="subform" action="">
                    <input type="text" id="email" name="email" value="">
                    <input type="submit" id="nlsubmit" name="submit" value="Sign up">
                    <div id="myResponse" style="display:none;"></div>
                    <div id="loading" style="display:none;"><img src="/images/wait.gif" alt=""></div>

                </form>

Like I said the newsletter table is updated great, though I'm needing the user to be notified on the same page if they are already present, if the email is invalid etc.

Upvotes: 2

Views: 1641

Answers (1)

diffie
diffie

Reputation: 147

In your function:

        $.ajax({
            url: "signup.php?email=" + email,
            success: function(result) {
                alert('here');
                $('#myResponse').show();
                $("loading").show();
                return false;
            }
        });

'result' refers to whatever was echoed on signup.php, so if result=="You are subscribed." that means that the email address already exists in the database, otherwise if result=="Thank you for subscribing" the email address is new to the database and the new user subscribed. So the function should look something like this:

       $.ajax({
            url: "signup.php?email=" + email,
            success: function(result) {
                if(result=="You are subscribed.")
                {
                  // notify user that email address already exists
                }

                alert('here');
                $('#myResponse').show();
                $("loading").show();
                return false;
            }
        });

Upvotes: 1

Related Questions