Creating Client-Side Code to Handle Mailing List Subscription

Dev Shed Forums Sponsor:

February 7th, 2013, 04:06 PM

etidd

Contributing User

Join Date: May 2009

Location: Atlanta, GA, USA (unfortunately)

Posts: 49

Time spent in forums: 7 h 44 m 50 sec
Reputation Power: 5

Creating Client-Side Code to Handle Mailing List Subscription

Hello all,

I'm trying to use jQuery to show and hide menus depending on whether the PHP code it references through the $.submit() or $.post() functions says that the submission is valid or invalid. All I'm trying to find out with this beginning is whether I'm able to return anything and make anything happen with PHP or JS or... something is not working! When I click the submit button on the first form, nothing happens on the page.

form markup on home page, index.html:

Code:

 <form id="emailbox" name="form1" method="post" action="Scripts/emailtester.php">
        <div>
          <input type="text" name="emailaddress" id="go" class="emailaddressin" value="your e-mail" onclick="input_focus(this)"  onblur="input_reset(this)" maxlength="60"/>
          <input type="submit" id="emailsubmit" value="Join" />
        </div>
      </form>

emailbox.js

Code:

$(document).ready(function(){
	$("#emailbox").submit(function(event){
		event.preventDefault();
		var ea = $("#go .emailaddressin").val();
		
		$.post(
    		"emailtester.php"
    		, { email_address : ea 
			   , ajax : 1 }
     		, function(data){
				$('#status').html(data);
				showResult(data);
			});
	});
});

emailtester.php

PHP Code:


		
			
<?php

    require_once('checkfirstsub.php');

    $status = 1;

    $ajax = $_POST['ajax'];

    $messages = " ";



    if($_POST['go']){

          $email = htmlentities($_POST['go']);

        $messages = '<ul><li>Submission Success</li></ul>';

    } else {

        $status = 0; 

        $messages = '<ul><li>Submission Failure - Empty Box</li></ul>';

    }



    $obj_PE = new ProcessEmail();

    if ($ajax == 1)

        echo $obj_PE -> processor($email);

    else {

        $messages = $obj_PE -> processor($email);

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="width=device-width, maximum-scale=1.0" />

    <title>Sign Up for the Mailing List at World Review Group</title>

    <script type="text/javascript" src="emailbox.js"></script>

    <script type="text/javascript" src="jQuery.js"></script>

</head>

<body>

      <form id="emailbox" name="form1" method="post" action="<?php $_SERVER['PHP_SELF']; ?>">

        <div>

          <input type="text" name="emailaddress" id="go" class="emailaddressin" value="your e-mail" onclick="input_focus(this)"  onblur="input_reset(this)" maxlength="60"/>

          <input type="submit" id="emailsubmit" value="Join" />

        </div>

      </form>

      <h2>Message(s)</h2>

      <?php echo $messages; ?>

</body>

</html>

<?php } ?>

checkfirstsub.php

PHP Code:


		
			
<?php

    class ProcessEmail

    {

        protected $email_address;

        

        public function processor($email)

        {

        $this -> email_address = $email;

        $status = 1;



            if ($email != "your e-mail"){

                    if (isItAValidEmail($email))

                    {

                        return '<ul><li>Submission Successful</li></ul>';

                    } else {

                        return '<ul><li>Submission Failure- Invalid E-mail</li></ul>';

                        $status = 0;

                    }

            } else {

                return '<ul><li>Submission Failure- Default Value in Box</li></ul>';

                $status = 0;

            }

        }

        

        protected function isItAValidEmail()

        {

            if (filter_var($this->email, FILTER_VALIDATE_EMAIL))

                return true;

            else 

                return false;

        }

    }

?>

Why am I not seeing a message posted inside the div with the id of status? That div is right in the middle of the screen (I positioned it in CSS), with a background image, but I'm not seeing any message submitted back to jQuery and posted to that div#status.

Here are some screenshots of what I'm trying to accomplish:
First Part, Home Page Normal without Email Submitted Yet
After the Email is Submitted Successfully, it will Show the Next Form with a Gray Mask over the Rest of the Content
Error Messages Appear in Red Text if 2nd Form Not Successfully Submitted
Submission Success

Thanks for all your help!

Creating Client-Side Code to Handle Mailing List Subscription

Developer Shed Advertisers and Affiliates