Hello everyone,
I am trying to make a mailing list submission script for my website at worldreviewgroup.com. The first part is to collect and verify an e-mail for the first form and show the next form accordingly. I am using jQuery to do this on the client side while using the .submit() function for the first form with an id of #emailbox. The .post() function returns data run by PHP to access it on the client-side without a page refresh. I want to move the 2nd form on-screen using the jQuery .css() function and render the rest of the elements inactive with a gray mask over everything except the 2nd form. Right now, I'm stuck on the first part attempting to make a complete data loop and getting the results message back to JavaScript successfully and append that results message in an element inside a div with an id of #status, just to simply show that I'm ready for the next step in this project.
form markup:
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="Scripts/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;
}
}
?>
I have been trying to figure this out for so long!
Before you post, read our: 
Trying to Create Client-Side E-mail Submission Script
