I've currently got a working PHP/AJAX form. It shows a form-message when the form is sent, or when it has an error. But, the page doesn't refresh when the form is sent, so it'll be easy to send multiple emails by just a simple double click (or even more clicks). Have a look at my code:
HTML
<form action="" method="POST">
<ul class="form-style-1">
<li>
<input type="text" id="mail-name" name="name" class="field-divided" maxlength="15" placeholder="Voornaam *" /> <input type="text" id="mail-lastname" name="lastname" class="field-divided" maxlength="15" placeholder="Achternaam" >
</li>
<li>
<input type="text" id="mail-email" name="email" placeholder="E-mail *" class="field-long" maxlength="40" >
</li>
<li>
<input type ="text" id="mail-phone" name="phone" placeholder="Telefoonnummer" class="field-long" maxlength = "15">
</li>
<button class="mail-submit" id="mail-submit" type="submit" name="submit">Versturen</button>
<span style="color: #0184b2; text-align: center; font-size: 20px; margin: 0 auto; display: block; padding-top: 10px;" class="form-message"></span>
</ul>
</form>
JS
$("form").on("submit",function(event){
event.preventDefault();
var name = $("#mail-name").val();
var lastname = $("#mail-lastname").val();
var email = $("#mail-email").val();
var phone = $("#mail-phone").val();
var subject = $("#mail-subject").val();
var information = $("#mail-information").val();
$.post("donation-contact.php",
{
name: name,
lastname: lastname,
email: email,
phone: phone,
submit: "yes"
},
function(data){
$(".form-message").html( data );
}
);
});
PHP
<?php
if (isset($_POST['submit'])) {
$email_to = "#";
$email_subject = "#";
$name = $_POST['name'];
$lastname = $_POST['lastname'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$errorEmpty = false;
$errorEmail = false;
if (empty($name)) {
echo "<span class='form-error'>Voer de verplichte velden in!</span>";
$errorEmpty = true;
}
elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "<span class='form-error'>Geef een geldig E-mail!</span>";
$errorEmail = true;
}
else {
$formcontent=" Naam: $name \n\n Achternaam: $lastname \n\n Email: $email \n\n Telefoon: $phone";
$mailheader = "From: ".$_POST["email"]."\r\n";
$headers = "From: ". htmlspecialchars($_POST['name']) ." <" . $_POST['email'] . ">\r\n";
$headers .= "Reply-To: " . $_POST['email'] . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
mail($email_to, $email_subject, $formcontent, $mailheader);
echo "<span class='form-success'>De mail is verzonden!</span>";
}
}
?>
I've tried disabling the form button when it's being pressed. This works if the user doesn't make any mistakes, but it will also disable the button when it shows an error message.
Is there a way to disable the button only when the form is sent? Or to remove all the form input when the form is sent?
Thank you for your time
All you need is basically already present in your code.
You intercept the submission via
$("form").on("submit",function(event){
event.preventDefault();
// ...
This is the place to disable the submit button:
$("form").on("submit",function(event){
event.preventDefault();
$('#mail-submit').prop('disabled', true);
// ...
});
But you need a different treatment in the PHP script so that you can handle errors. Basiacally you need to send back a JSON object which will have a simple text property indicating the status (error / success) and a text property for the message (which may contain HTML).
PHP
if (empty($name)) {
$response = array('status' => 'error', 'message' => '<span class='form-error'>Voer de verplichte velden in!</span>');
$errorEmpty = true;
}
elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$response = array('status' => 'error', 'message' => '<span class='form-error'>Geef een geldig E-mail!</span>');
$errorEmail = true;
}
else {
// send email...
$response = array('status' => 'success', 'message' => '<span class='form-success'>De mail is verzonden!</span>');
}
// No matter what happened, send the respons as a JSON object for easy treatment in JavaScript
echo json_encode($response);
Now in JavaScript you will receive an object, instead of text in you callback function:
function(data) {
$(".form-message").html( data.message );
// If there was an error you must re-enable the submit button
if (data.status === 'error') {
$('#mail-submit').prop('disabled', false);
}
}
Related
I have a form that uses an HTML form, http post request, and PHP backend to automatically send me the data that a user inputs into the form. The submission works as expected, but I am not getting an email. My email is also run by outlook. Not sure if it's an encryption thing.
HTML Code
<form action="mail.php" method="POST">
<div class="email-box">
<input class="tbox" id="email_box" name="email" type="email" style="cursor: pointer;" placeholder="Enter your email">
<button class="btn" id="email_btn" type="submit" name="button">Subscribe</button>
</div>
</form>
<!-- Snipped JavaScript validation -->
PHP
<?php
$errors = '';
$myemail = 'me#website.com';
if (empty($_POST['email'])) {
$errors .= "\n Error: all fields are required";
}
$email_address = $_POST['email'];
if (!preg_match(
"/^[_a-z0-9-]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i",
$email_address)) {
$errors .= "\n Error: Invalid email address";
}
if (empty($errors)) {
$to = $myemail;
$email_subject = "New Vrify subscription: $email_address";
$email_body = "You have a new subscriber. " .
"Here are the details:\n Email: $email_address \n " .
$headers = "From: subscriber#website.com";
mail($to, $email_subject, $email_body, $headers);
//redirect to the 'thank you' page
header('Location: thank-you.html');
}
?>
This may not be the full solution, but as far as I'm aware
"New Vrify subscription: $email_address"
is not valid. Instead, concatenate them using the . operator
"New Vrify subscription:".$email_address
Do the same to the other variables you have, I had the same issue when working on the following php:
if (($_SERVER["REQUEST_METHOD"] ?? 'GET') == "POST") {
$msg ="New message from mysite!\n".$_POST["message"]."\nReply Email:".$_POST["email"];
mail("me#gmail.com", time(), $msg,"From: contact#mysite");
}
I have a pretty simple form in html from which i am trying to send an email. I checked online for some tutorials sing js but most of them were not working. Here is my code the form is there but when i press submit the js function is not getting called rather it is not doing anything on the html form.
<form class="form-inline" id="contact-form" onSubmit="return false">
<center><p><input style="height:3vw;width:40vw;font-size:1.2vw;" type="text" class="form-control" size="30" placeholder=" Name" name="name" id="name" required></p>
<p><input style="height:3vw;width:40vw;font-size:1.2vw;" type="email" class="form-control" size="30" placeholder=" E-mail Address" name="email" id="email" required></p>
<p><input style="height:3vw;width:40vw;font-size:1.2vw;" type="text" class="form-control" size="30" placeholder=" Subject" name="subject" id="subject" required></p>
<p><textarea style="height:10vw;width:40vw;font-size:1.2vw;" placeholder=" Message..." class="form-control" name="message" id="message"></textarea></p>
<p><button type="submit" class="button" name="btn_submit" id="btn_submit">Send</button></p></center>
</form>
i have included the js file as it is after the <div> ending of the form
<script src="js/jquery-2.1.4.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/functions.js"></script>
functions.js file is as follows
//Contact Us
$("#btn_submit").click(function() {
//get input field values
var user_name = $('input[name=name]').val();
var user_email = $('input[name=email]').val();
var user_message = $('textarea[name=message]').val();
//simple validation at client's end
var proceed = true;
if(user_name==""){
proceed = false;
}
if(user_email==""){
proceed = false;
}
if(user_message=="") {
proceed = false;
}
//everything looks good! proceed...
if(proceed)
{
//data to be sent to server
post_data = {'userName':user_name, 'userEmail':user_email, 'userMessage':user_message};
//Ajax post data to server
$.post('contact_me.php', post_data, function(response){
//load json data from server and output message
if(response.type == 'error')
{
output = '<div class="alert-danger">'+response.text+'</div>';
}else{
output = '<div class="alert-success">'+response.text+'</div>';
//reset values in all input fields
$('.form-inline input').val('');
$('.form-inline textarea').val('');
}
$("#result").hide().html(output).slideDown();
}, 'json');
}
});
and my email handler is as follows :
<?php
if($_POST)
{
$to_Email = "email.com"; //Replace with recipient email address
//check if its an ajax request, exit if not
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
//exit script outputting json data
$output = json_encode(
array(
'type'=>'error',
'text' => 'Request must come from Ajax'
));
die($output);
}
//check $_POST vars are set, exit if any missing
if(!isset($_POST["userName"]) || !isset($_POST["userSubject"]) || !isset($_POST["userEmail"]) || !isset($_POST["userMessage"]))
{
$output = json_encode(array('type'=>'error', 'text' => 'Input fields are empty!'));
die($output);
}
//Sanitize input data using PHP filter_var().
$user_Name = filter_var($_POST["userName"], FILTER_SANITIZE_STRING);
$user_Email = filter_var($_POST["userEmail"], FILTER_SANITIZE_EMAIL);
$user_Subject = filter_var($_POST["userSubject"], FILTER_SANITIZE_STRING);
$user_Message = filter_var($_POST["userMessage"], FILTER_SANITIZE_STRING);
//additional php validation
if(strlen($user_Name)<3) // If length is less than 3 it will throw an HTTP error.
{
$output = json_encode(array('type'=>'error', 'text' => 'Name is too short or empty!'));
die($output);
}
if(!filter_var($user_Email, FILTER_VALIDATE_EMAIL)) //email validation
{
$output = json_encode(array('type'=>'error', 'text' => 'Please enter a valid email!'));
die($output);
}
if(strlen($user_Message)<5) //check emtpy message
{
$output = json_encode(array('type'=>'error', 'text' => 'Too short message! Please enter something.'));
die($output);
}
$subject = $user_Subject;
$message_Body = "<strong>Name: </strong>". $user_Name ."<br>";
$message_Body .= "<strong>Email: </strong>". $user_Email ."<br>";
$message_Body .= "<strong>Message: </strong>". $user_Message ."<br>";
$headers = "From: " . strip_tags($user_Email) . "\r\n";
$headers .= "Reply-To: ". strip_tags($user_Email) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
//proceed with PHP email.
/*$headers = 'From: '.$user_Email.'' . "\r\n" .
'Reply-To: '.$user_Email.'' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
*/
$sentMail = #mail($to_Email, $subject, $message_Body, $headers);
if(!$sentMail)
{
$output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.'));
die($output);
}else{
$output = json_encode(array('type'=>'message', 'text' => 'Hi '.$user_Name .' Thank you for contacting us.'));
die($output);
}
}
?>
On pressing submit the js file is not being called and there is no error in console either. Can anyone please help me out where i am making the mistake. Thank you.
You need to prevent the default form submission action which is to refresh the page.
You need to add a parameter to your function that can track the event and then call preventDefault() from that parameter:
$("#btn_submit").click(function(e) {
e.preventDefault();
...
}
Try replacing
$("#btn_submit").click(function() {
with
$(document).on("click,", "#btn_submit", function(){
You need to prevent the form from submitting, otherwise it will just directly submit and turn to the server-side.
You can do such a thing using jQuery:
$("#btn_submit").click(function(e) {
e.preventDefault();
//your code goes here after preventing submission
}
I'm just a beginner and trying to implement ajax contact form with php mailing script. But when I click on Submit nothing happens and nothing appears.
Below is my codes.
HTML
<form id="contactform" class="contact-form text-center" role="form">
<!-- IF MAIL SENT SUCCESSFULLY -->
<h6 class="success">
<span class="olored-text icon_check"></span> Your message has been sent successfully.</h6>
<!-- IF MAIL SENDING UNSUCCESSFULL -->
<h6 class="error">
<span class="colored-text icon_error-circle_alt"></span> E-mail must be valid.</h6>
<input id="cf-name" type="text" name="cf-name" placeholder="Your Name">
<input id="cf-email" type="email" name="cf-email" placeholder="Your Email">
<input id="cf-address" type="text" rows="7" name="cf-address" placeholder="Your Home Address">
<input id="cf-phone" type="text" rows="7" name="cf-phone" placeholder="Your Phone Number">
<input type="submit" class="button alt" value="Submit" id="submit" name="submit" data-style="expand-left"/>
</form>
Javascript
// Function for email address validation
function isValidEmail(emailAddress) {
var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(#\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
return pattern.test(emailAddress);
}
/* =================================
CONTACT FORM
=================================== */
$("#contactform").submit(function (e) {
e.preventDefault();
var name = $("#cf-name").val();
var email = $("#cf-email").val();
var address = $("#cf-address").val();
var message = $("#cf-phone").val();
var dataString = 'name=' + name + '&email=' + email + '&address=' + address + '&phone=' + message;
function isValidEmail(emailAddress) {
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))#((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
return pattern.test(emailAddress);
}
if (isValidEmail(email) && (message.length > 1) && (address.length > 1) && (name.length > 1)) {
$.ajax({
type: "POST",
url: "sendmail.php",
data: dataString,
success: function () {
$('.success').fadeIn(1000);
$('.error').fadeOut(500);
}
});
}
else {
$('.error').fadeIn(1000);
$('.success').fadeOut(500);
}
return false;
});
PHP
<?php
// Get values from jquery
$name = $_POST['name'];
$email = $_POST['email'];
$address = $_POST['address'];
$phone = $_POST['phone'];
$to = "name#email.com";
$subject = "New Email Subscriber";
$message = " Name: " . $name . "\r\n\r\n Email: " . $email . "\r\n\r\n Address: " . $address . "\r\n\r\n Phone: " . $phone;
$from = "ContactForm";
$headers = "From:" . $from . "\r\n";
$headers .= "Content-type: text/plain; charset=UTF-8" . "\r\n";
if (#mail($to, $subject, $message, $headers)) {
echo "success";
} else {
echo "invalid";
}
Can someone please fix this code? I don't what's wrong with it.
Thanks in advance.
It may have nothing to do with Ajax but the php native mail function; I recommend use something like phpMailer since they are much more reliable than native function.
So I'm having some issues getting my validation which resides in my php action script.
I have the following form:
<form action="contact.php" method ="post" enctype="multipart/form-data" id="contact_form" name="contact_form">
<div class="div_input"><input name="name" type="text" value="Name: " class="input4" /></div>
<div class="div_input"><input name="phone" type="text" value="Phone: " class="input4" /></div>
<div class="div_input"><input name="email" type="text" value="E-mail: " class="input4" /></div>
<textarea name="message" cols="0" rows="0" class="textarea2" >Message: </textarea>
Then I am submitting using the onclick() method. This is where my issue is arising I believe.
<div class="link4"><span>send</span></div>
<div class="link4"><span>clear</span></div>
</form>
And my script...
<?php
$errors = '';
$myemail = 'test#test.com';
$name = $phone = $email = $message ='';
$nameError = $emailError =$phoneError = $messageError = '';
if(empty($_POST['name']))
{$nameError='Name is required!';}
else
{
$name = test_input($_POST['name']);
// check if name only contains letters and whitespace
if (!preg_match("/^[a-zA-Z ]*$/",$name))
{
$nameError='Only letters and white space allowed';
}
}
if(empty($_POST['email']))
{$emailError='Email is required!';}
else
{
$email = test_input($_POST['email']);
//check to make sure is a valid email format
if(!preg_match("/([\w\-]+\#[\w\-]+\.[\w\-]+)/",$email))
{
$emailError = "Invalid email format!";
}
}
if(empty($_POST['phone']))
{
'Phone number is required';
}
else
{
$phone = test_input($_POST['phone']);
//Allow only digits in the phone number
if(!preg_match("/^[\d\-]+$/",$phone));
{
$phoneError = 'Phone must be only numbers and dashes';
}
}
if (empty($_POST['message']))
{
$messageError = 'Message is required!';
}
else
{
$message = test_input($_POST['message']);
}
function test_input($data)
{
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
$to = $myemail;
$email_subject = "Contact form submission: $name";
$email_body = "You have received a new message. ".
" Here are the details:\n Name: $name \n ".
"Email: $email\n Phone Number: $phone\n Message \n $message";
$headers = "From: $email \r\n";
$headers .= "Reply-To: $email";
mail($to,$email_subject,$email_body,$headers);
//redirect to the 'thank you' page
//header('Location: index-5.html');
?>
When I test this, no validation runs at all. I can click send with the form empty and no errors appear.
I've seen a couple people having issues with the javascript onclick function and validation in their php script. Could this be it? Or am I missing something in my script or form? I'm thinking maybe I need to add some javascript after the submit() method.
What do you all think?
The main problem is that your PHP script is sending the message regardless of whether or not there's an error.
Try checking whether $nameError, $emailError,$phoneError, and $messageError are all empty strings before submitting.
Other suggested improvements:
Read up on PHP's filter functions and use them instead of your regular expressions.
Take advantage of HTML5 validation in browsers that support it by adding required to all of your input fields.
Use <input type="submit" value="send"> and <input type="reset" value="clear"> instead of onclick. They're a little bit harder to style with CSS, but it's better for accessibility and works even when JavaScript doesn't.
One thing I see is
if(empty($_POST['phone']))
{
'Phone number is required';
}
should be
if(empty($_POST['phone']))
{
$phoneError = 'Phone number is required';
}
Short version:
I have code to insert a forms contents into a database
I have code to send the form data to Salesforce as a lead
Both of these work fine ALONE (If I change the form "action" to either of the PHP scripts) -- but when I attempt to combine them into 1 PHP script, the form invalidates and I can't figure out why.
Here's the code for inserting into DB:
<?php
include ".db_config.php";
/* open a connection to the database */
$link = connect_db();
/* grab all of the required fields */
$firstName = $_POST['firstName'];
$lastName = $_POST['lastName'];
$pcode = $_POST['pcode'];
$terms = $_POST['terms'];
$news = $_POST['news'];
$facebookConnection = '0';
/* check to make sure it's valid email address */
$email = isset( $_POST['email'] ) ? preg_replace( "/[^\.\-\_\#a-zA-Z0-9]/", "", $_POST['email'] ) : "";
$language = $_POST['language'];
/* check to see if this was a facebook connection */
$facebookID = '';
if(isset($_POST['facebookID'])){
$facebookID = $_POST['facebookID'];
}
/* check to see if this signature connected to Facebook */
if($facebookID != ""){
$facebookConnection = '1';
}
/* set the true/false flag for the terms and conditions agreement. */
if ($terms == 'terms'){
$terms = 1;
}
else{
$terms = 0;
}
/* set the true/false flag for the updates sign up */
if($news =='news'){
$news = 1;
}
else {
$news =0;
}
$success='';
$error='';
// Check to see if the email exists already in the database
$query = "select count(*) as counting from signedUsers where eMailAddress ='$email'";
$result = do_query($query);
$emailIncluded = '0';
/* get the number of rows from the table where this email address is. */
while($row = mysql_fetch_array($result))
{
/* if there is 1 or more row, then the email exists. */
if ($row["counting"] > 0)
{
$emailIncluded = '1';
}
}
/* if the email address doesn't exist, save it and return 'success' */
if ($emailIncluded == '0'){
$insert = "insert into signedUsers (FirstName, LastName, eMailAddress, PostalCode, ToC,eMailUpdates, language, facebookID, FacebookConnection) values('$firstName','$lastName','$email', '$pcode', $terms, $news, '$language', '$facebookID', $facebookConnection)";// Do Your Insert Query
if(mysql_query($insert)) {
$success='1';
} else {
$error='failed insert';
}
}
/* if the email address exists, return 'error' to be dealt with on the front end that explains it. */
else {
$error = 'email exists';
$success = '';
}
$arr = array(
'success'=>$success,
'error'=>$error
);
if ($success == '1')
{
header('Content-Type: application/json');
$arr = array(
'success'=>$success,
);
echo json_encode($arr);
}
else
{
header('HTTP/1.1 500 Internal Server');
header('Content-Type: application/json');
//die('ERROR');
// or:
die(json_encode(array('message' => 'ERROR', code => $error)));
}
mysql_close($link);
?>
Here's the code to send to sailesforce:
<?php
$req = "&lead_source=" . urlencode($_GET["1"]);
$req .= "&first_name=" . urlencode($_GET["2"]);
$req .= "&last_name=" . urlencode($_GET["3"]);
$req .= "&zip=" . urlencode($_GET["4"]);
$req .= "&email=" . urlencode($_GET["5"]);
$req .= "&debug=" . urlencode("0");
$req .= "&oid=" . urlencode("00Di0000000fnSP");
$req .= "&retURL=" . urlencode("#");
$req .= "&debugEmail=" . urlencode("sam.stiles#orangesprocket.com");
$header = "POST /servlet/servlet.WebToLead?encoding=UTF-8 HTTP/1.0\r\n";
$header .= "Content-Type: application/x-www-form-urlencoded\r\n";
$header .= "Host: www.salesforce.com\r\n";
$header .= "Content-Length: " . strlen($req) . "\r\n\r\n";
$fp = fsockopen ('www.salesforce.com', 80, $errno, $errstr, 30);
if (!$fp) {
echo "No connection made";
} else {
fputs ($fp, $header . $req);
while (!feof($fp)) {
$res = fgets ($fp, 1024);
echo $res;
}
}
fclose($fp);
?>
Again, these both work INDIVIDUALLY, bot not together in the same PHP file.
Here's the form & the AJAX:
//Setup contact form validation
jQuery('#petition-form').validate({
rules: {
firstName: "defaultInvalid",
lastName: "defaultInvalid",
email: "defaultInvalid",
email: "emailValid",
emailConfirm: "defaultInvalid",
emailConfirm: "emailValid",
pcode: "postalcode"
},
messages: {
firstName: "",
lastName: "",
email: "",
emailConfirm: "",
pcode: "",
terms: ""
},
errorLabelContainer: '#message',
onkeyup: false,
onfocusout: false,
onclick: false,
submitHandler: function(form){
//Serialize the form data
//Serialize the form data
var formData = jQuery('#petition-form').serialize();
//Send the form data to the script
jQuery.ajax({
type: 'POST',
url: '/resource/php/signThePetition.php',
data: formData,
dataType: 'json',
error: contactFormErrorMsg,
success: contactFormSuccessMsg
});
//Stop the form from refreshing the page on submit
return false;
}
});
});
//Contact form error messages
function contactFormErrorMsg() {
jQuery('#message').show();
jQuery('[name="emailConfirm"]').val('This email has already signed the petition. Thank you.');
return false;
/* this means that the email address already exists */
}
//Contact form success messages
function contactFormSuccessMsg() {
jQuery('input, select').removeClass('error').removeClass('valid');
jQuery('#petition-2').fadeOut();
jQuery('#petition-3').fadeIn();
resetForm(jQuery('#petition-form'));
}
// ]]>
</script>
<form name="petition-form" id="petition-form" action="/resource/php/sendEmail_contact.php" method="post">
<p id="message">There was an error in the form below. Please fix it before proceeding.</p>
<input type="text" name="firstName" placeholder="First name*" class="required short pad">
<input type="text" name="lastName" placeholder="Last name*" class="required short"><br />
<input type="text" name="email" id="email" placeholder="Email*" class="required email"><br />
<input type="text" name="emailConfirm" placeholder="Confirm email*" class="required email" equalTo="#email"><br />
<input type="text" name="pcode" placeholder="Postal code*" class="required short pad"><br />
<input type="checkbox" name="terms" value="terms" class="required"><span class="terms">I have read and agree to the terms and conditions</span><br />
<input type="checkbox" name="news" value="news" checked="checked">Send me updates and action alerts from Partners for Mental Health
<input type="hidden" name="language" id="language" value="en_US" class="required" ><br />
<input type="hidden" name="facebookID" id="facebookID" value="" class="required" >
<div id="form-buttons">
<button type="submit" value="Submit" name="submit" class="black-button">Submit</button>
</div>
</form>
Are you outputting HTTP headers twice when you combine the scripts?
Incidentally, there's no reason you can't fire off jQuery.ajax() twice in a row, once to each script.