Hello all,
I have a question about what needs to be written in my PHP script to return a message/or HTML content that will be accessed through the jQuery .post() method. This is a way I learned to run client-side code without a page refresh or redirection.
PHP
emailtester.php
<?php
class ProcessFirstEmail
{
function processor()
{
$email = $_POST['go'];
if ($email != "your e-mail"){
if (isset($email))
{
if (isItAValidEmail($email))
{
return true;
} else {
echo $email . 'is not a valid e-mail address.';
return false;
}
} else {
echo 'There\\'s nothing in the e-mail box!';
return false;
}
} else {
return false;
die();
}
}
public function isItAValidEmail($email)
{
if (filter_var($email, FILTER_VALIDATE_EMAIL))
return true;
else
return false;
}
}
?>
confirmform.php
<?php
class CheckForm
{
public function checkSubmission()
{
if ($_POST['country'] != "Select Country")
{
if (isset($_POST['confirmemail']) && isset($_POST['name']))
{
$origEmail = $_POST['go'];
$confirmEmail = $_POST['confirmemail'];
if ($origEmail == $confirmEmail)
{
$name = htmlspecialchars($_POST['name']);
$ageRange = $_POST['age'];
$country = $_POST['country'];
include 'Scripts/databasewriter.php';
$dbWriter = new DatabaseWriter;
$dbWriter -> writeUserToDatabase($confirmEmail, $name, $ageRange, $country, $category);
} else {
die();
}
} else {
return false;
}
} else {
return false;
}
}
}
?>
jQuery:
$(document).ready(function(){
//When the submit button is clicked
$("#origemailform").on("click", function(){
//Post the form data serialized for the proper formatting
$.post("emailtester.php",$("#emailbox").serialize()
//Get the response from process.php
, function(response){
//Prepend the response to div id step2
$("#confirmform").prepend($(response).fadeIn("slow"));
});
$("#2ndstep").on("click", function(){
});
});
});
HTML form markup:
<form id="emailbox" name="form1" method="post" action="?">
<div>
<input type="text" name="go" id="go" value="your e-mail" onclick="input_focus(this)" onblur="input_reset(this)" maxlength="60"/>
<input type="submit" value="Join" onclick="processor()" />
</div>
</form>
</div>
<div id="rightsideend"> </div>
</div>
<!-- end side windows -->
<div id="confirmform">
<form name="form2" id="submissionform" method="post" action="?">
<div>
<label for="confirmemail" class="fixedwidth">Confirm your e-mail:<span>*</span></label>
<input type="text" name="confirmemail" class="fixedwidth" value="" maxlength="60" class="inputwidth"/>
</div>
<div>
<label for="name" class="fixedwidth">Enter your name:<span>*</span></label>
<input type="text" name="name" class="fixedwidth" value="" maxlength="60" class="inputwidth"/>
</div>
<div>
<label for="age" class="fixedwidth">Select your age range:</label>
<select name="age" class="inputwidth">
<option selected="selected">18–35</option>
<option>36–55</option>
<option>55+</option>
<option>17 or younger</option>
</select>
</div>
<div>
<label for="country" class="fixedwidth">Select your country:<span>*</span></label>
<select name="country" class="inputwidth">
<option selected="selected">Select Country</option>
<option>United States</option>
<option>United Kingdom</option>
<option>Canada</option>
<option>Australia</option>
<option>Russia</option>
<option>Brazil</option>
<option>Somewhere else</option>
</select>
</div>
<p id="errormessage">You didn't enter the same e-mail address!</p>
<input type="submit" value="Sign Me Up!" class="formsubmitbutton" onclick="checkSubmission()" id="2ndstep"/>
<input type="submit" value="Cancel" class="formsubmitbutton" onclick="backToHomePage()"/>
</form>
</div>
<div id="successfulsubmit">
<h4>Submission Successful</h4>
<p id="postsubmissionmessage">Your submission was successful. Thank you for signing up!</p>
</div>
</div><!-- end container -->
<script type="text/javascript" src="Scripts/jQuery.js"></script>
<script type="text/javascript" src="Scripts/emailbox.js"></script>
</body>
</html>
Here’s a screenshot with an emphasis on the red text, which would contain the error message for an unsuccessful submission that my PHP code needs to communicate to jQuery:
Screenshot
I’m also trying to learn how to tell jQuery that the info submitted is valid and show the next step, if I haven’t already coded that part. Haven’t found a good reading resource on this subject.
