Goal 1: display errors above the form on same page
Goal 2: direct users to a new thankyou page when form is submitted.
The form uses ajax. I am able to get it to work with the error messages displaying correctly but as is, the thankyou message also displays in the same spot and the form is left filled out. I need it to direct to a new page I designed for the purpose.
Here is my original code and my new code with one of my attempts.
JS file original
$(function(){
$('#form_submit').click(function(){
var input_name = $('#form_name').val(),
input_email = $('#form_email').val(),
input_subject = $('#form_subject').val(),
input_message = $('#form_message').val(),
response_text = $('#response');
response_text.hide();
response_text.html('Loading...').show();
$.post('http://url/scripts/contact-process.php', {name: input_name, email: input_email, subject: input_subject, message: input_message}, function(data){
response_text.html(data);
});
return false;
});
});
New js code
$(function(){
$('#form_submit').click(function(){
var input_name = $('#form_name').val(),
input_email = $('#form_email').val(),
input_subject = $('#form_subject').val(),
input_message = $('#form_message').val(),
response_text = $('#response');
response_text.hide();
response_text.html('Loading...').show();
$.post('http://url/scripts/contact-process.php', {name: input_name, email: input_email, subject: input_subject, message: input_message}, function(data){
if ( data === '#form_submit' )
{
window.location = "http://www.google.com/"
}
else
{
response_text.html(data);
}
});
return false;
});
});
if ( data === ‘#form_submit’ ) I am not sure how this line should be done. This is all based on research I have done and I am for the most part still in the dark about how to handle it.
Here is my contact form code
<form id='contact-form' method='post' action='<?php bloginfo('url'); ?>/wp-content/themes/fullscreen_child/scripts/contact-process.php'>
<fieldset>
<input id='form_name' type='text' name='name' value='' onfocus="if(this.value=='Name'){this.value=''};" onblur="if(this.value==''){this.value='Name'};" />
<label for=name accesskey=U>Name</label>
<input id='form_email' type='text' name='email' value="" onfocus="if(this.value=='Email'){this.value=''};" onblur="if(this.value==''){this.value='Email'};" />
<label for=email accesskey=E>Email</label>
<input id='form_subject' type='text' name='subject' value="" onfocus="if(this.value=='Subject'){this.value=''};" onblur="if(this.value==''){this.value='Subject'};" />
<label for=phone accesskey=P>Subject</label>
<textarea id='form_message' rows='10' cols='40' name='message'></textarea>
<input id='form_submit' class="submit" type='submit' name='submit' value='' />
<div class='hide'>
<label>Do not fill out this field</label>
<input name='spam_check' type='text' value='' />
</div>
</fieldset>
</form>
and my contact process.php code
<?php
if(isset($_POST['name']) && empty($_POST['spam_check']))
{
require 'email-validator.php';
$validator = new EmailAddressValidator();
$errors = array();
$input_name = strip_tags($_POST['name']);
$input_email = strip_tags($_POST['email']);
$input_subject = strip_tags($_POST['subject']);
$input_message = strip_tags($_POST['message']);
$required = array('Name field' => 'name', 'Email field' => 'email', 'Message field' => 'message');
foreach($required as $key=>$value)
{
if(isset($_POST[$value]) && $_POST[$value] !== '')
{
continue;
}
else {
$errors[] = $key . ' cannot be left blank';
}
}
if (!$validator->check_email_address($input_email)) {
$errors[] = 'Enter a valid email address.';
}
if(empty($errors))
{
if(mail('info@support.com', "Message from $input_name - $input_subject", $input_message, "From: $input_email"))
{
echo 'Thank You - your email has been sent.';
}
else
{
echo 'There was an issue when sending your email. Please try again.';
}
}
else
{
echo implode('<br />', $errors);
}
}
else
{
die('You cannot access this page directly.');
}
I have been trying to get this working for days now. any help will be greatly appreciated!