Ok, so I modified the test stuff I sent you earlier. Again this was a real quick refinement so it sorely lacks in security protection and good object design or assessibility design.
What I wanted to illustrate to you is:
- the use of an Object in the data processing file
- the jQuery function for submit
- the ability for this to have an action and work if JavaScript is disabled.
I didn’t have time to pack it in a ZIP file, so this time you’ll have to copy it.
test.js
$(document).ready(function() {
[COLOR=#ff0000]$("form").submit(function(event) {[/COLOR]
[COLOR=#ff0000] event.preventDefault();[/COLOR]
var fn = $(".first_name_in").val();
var ln = $(".last_name_in").val();
var em = $(".email_address_in").val();
$.post("process_data.php"
, {first_name : fn
, last_name : ln
, email : em
[COLOR=#ff0000] , ajax : '1'[/COLOR]
}
, function(data){
$('#status').html(data);
});
});
});
[B]
test_email_form.html
[/B]
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0">
<title>Email Ajax Test</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
<style>
div#submit {
display: block;
width: 150px;
height:20px;
margin-top: 10px;
background-color: #ddd;
}
</style>
</head>
<body>
<form name='email_form' method='post' action='process_data.php'>
First name: <input type="text" class='first_name_in' name="first_name"><br>
Last name: <input type="text" class='last_name_in'name="last_name"><br>
Email: <input type="text" class='email_address_in' name="email"><br>
[COLOR=#ff0000]<input type="submit" name="send" value="Submit" />[/COLOR]
</form>
<div id='status'></div>
</body>
</html>
and
[B]process_data.php
[/B]
<?php
$ajax = $_POST['ajax'];
$first_name = htmlentities($_POST['first_name']);
$last_name = htmlentities($_POST['last_name']);
$email = htmlentities($_POST['email']);
$o_Validate = new Validate($first_name, $last_name, $email);
if($ajax == 1){
echo $o_Validate->testForErrors();
} else {
$errors = $o_Validate->testForErrors();
?>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0">
<title>Email Ajax Test</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
<style>
div#submit {
display: block;
width: 150px;
height:20px;
margin-top: 10px;
background-color: #ddd;
}
</style>
</head>
<body>
<form name='email_form' method='post' action='<?php echo $_SERVER['PHP_SELF']; ?>'>
First name: <input type="text" class='first_name_in' name="first_name"><br>
Last name: <input type="text" class='last_name_in'name="last_name"><br>
Email: <input type="text" class='email_address_in' name="email"><br>
<input type="submit" name="send" value="Submit" />
</form>
<h2>Message(s)</h2>
<?php echo $errors; ?>
</body>
</html>
<?php
}
?>
<?php
class Validate {
protected $first_name;
protected $last_name;
protected $email;
function __construct($first_name, $last_name, $email){
$this->first_name = $first_name;
$this->last_name = $last_name;
$this->email = $email;
}
public function testForErrors(){
$status = 1;
$errors = '<ul>';
if(empty($this->first_name)){
$status = 0;
$errors .= '<li>Sorry you did not enter your first name, try again</li>';
}
if(empty($this->last_name)){
$status = 0;
$errors .= '<li>Sorry you did not enter your last name, try again</li>';
}
if(empty($this->email)){
$status = 0;
$errors .= '<li>Sorry you did not enter your email address, try again</li>';
}
$errors .= '</ul>';
if($status == 1){
return 'Your email was sent successfully';
} else {
return $errors;
}
}
}
?>
You can see the most extensive changes in the process_data.php file. Please note the extra ajax JavaScript variable that is passed to this .php page. This is used to decide if the request was initiated by the AJAX object or if it didn’t (JavaScript turned off or device incapable of loading JavaScript).
Again, you can call as many objects and manipulate whatever data you want in the process_data.php page. Even if you need to echo an Array you can
myarray = array(one, two, three);
echo implode(“,”, myarray); /This will echo a string one, two, three that you can interpret in a JavaScript array/
Sorry for the quickness.
Steve