I have searched online and found lots of freely available scripts that seem straight forward enough, in terms of incorporating them into a html form on a website.
The thing is I can’t seem to implement them properly.
I have set up inline validation using javascript that works on the home page but not the gallery. And the email only get’s sent from the gallery and not the home page despite the same code being used on both pages.
You should post the code that you are using in getInTouch.php
The HTML seems to be the same on both pages, so the issue must be within your PHP script.
The submitHandler method in your init.js file does not submit the form. It hides it and displays a message. You could either make it post the form with form.submit() or then use jQuery ajax post to make an asynchronous post so that the user’s page doesn’t refresh and they get to see the nice inline thank you message.
I have changed the submitHandler from hide to submit and uploaded it to the server. Both pages are now submitting the form but still the JavaScript validation is only working on the home page…?
Also As far as I can tell the php does not check successfully for an email address. blank forms are sent regardless. I need to figure out how to do this properly and also how to display the success message as outlined in the init.JS file instead of the php redirecting to an empty page with the success message in it. It looks awful.
to do:
Get JavaScript validation working on both pages.
PHP validate properly
success message in place of form on page not new page.
Am I on the right path of thinking here? Any advice as to where to find examples of how to do this for a noob? I’ve looked around a lot but the vast amount of info of differing skill levels and complexity often just means spending hours just looking.
Ok, so, I have changed the getInTouch.php form action, with the help of W3Schools to the following;
<?php
function spamcheck($field)
{
//filter_var() sanitizes the e-mail address using FILTER_SANITIZE_EMAIL
$field=filter_var($field, FILTER_SANITIZE_EMAIL);
//filter_var() validates the e-mail address using FILTER_VALIDATE_EMAIL
if(filter_var($field, FILTER_VALIDATE_EMAIL))
{
return TRUE;
}
else
{
return FALSE;
}
}
if (isset($_REQUEST['email']))
{//if "email" is filled out, proceed
//check if the email address is invalid
$mailcheck = spamcheck($_REQUEST['email']);
if ($mailcheck==FALSE)
{
echo "Invalid input";
}
else
{//send email
$name = $_REQUEST['name'] ;
$email = $_REQUEST['email'] ;
$message = $_REQUEST['message'] ;
mail("hickeyeve@gmail.com", "Subject: A message from your website",
$message, "From: $name", "Reply to: $email");
echo "Thank you for using our mail form";
}
}
else
{//if "email" is not filled out, display the form
echo "<form method='post' action='mailform.php'>
Email: <input name='email' type='text' /><br />
Subject: <input name='subject' type='text' /><br />
Message:<br />
<textarea name='message' rows='15' cols='40'>
</textarea><br />
<input type='submit' />
</form>";
}
?>
It works (displaying error messages and success messages in a new blank page - not want I want but i’ll have to figure that out later) but completely overrides the JavaScript inline validation.
The validation should primarily be done by php as javascript validation can easily be circumvented. Is the javascript output being displayed at all? If the php side of it is working now and it’s just a javascript problem then you can report a post in this thread and request the thread be moved to the javascript forum
It is true that the php is working and javascript not but I’m not so sure this thread should be moved just yet as the php isn’t doing exactly what I want.
I want the success and invalid messages to display on the same page as the form, in place of the form. Sounds like JV’s suggestion;
1. Post the form using AJAX and handle messages on client side
is what I want. I’ll have to do some more reading but will be back for advice/help I’m sure.
<?php
if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['message'])) {
die('Error: Missing variables');
}
$name=$_POST['name'];
$email=$_POST['email'];
$subject=$_POST['subject'];
$message=$_POST['message'];
$to='hickeyeve@gmail.com';
$headers = 'From: '.$email."\\r\
" .
'Reply-To: '.$email."\\r\
" .
'X-Mailer: PHP/' . phpversion();
$subject = $subject;
$body='You have got a new message from the contact form on your website.'."\
\
";
$body.='Name: '.$name."\
";
$body.='Email: '.$email."\
";
$body.='Subject: '.$subject."\
";
$body.='Message: '."\
".$message."\
";
if(mail($to, $subject, $body, $headers)) {
die('Mail sent');
} else {
die('Error: Mail failed');
}
?>
and form.js looks like this;
// JavaScript Document
$(document).ready(function() {
$('#contactForm #submit').click(function() {
// Fade in the progress bar
$('#contactForm #formProgress').hide();
$('#contactForm #formProgress').html('<img src="images/ajax-loader.gif" alt="sending..." />');
$('#contactForm #formProgress').fadeIn();
// Disable the submit button
$('#contactForm #submit').attr("disabled", "disabled");
// Clear and hide any error messages
$('#contactForm .formError').html('');
// Set temaprary variables for the script
var isFocus=0;
var isError=0;
// Get the data from the form
var name=$('#contactForm #name').val();
var email=$('#contactForm #email').val();
var subject=$('#contactForm #subject').val();
var message=$('#contactForm #message').val();
// Validate the data
if(name=='') {
$('#contactForm #errorName').html('This is a required field.');
$('#contactForm #name').focus();
isFocus=1;
isError=1;
}
if(email=='') {
$('#contactForm #errorEmail').html('This is a required field.');
if(isFocus==0) {
$('#contactForm #email').focus();
isFocus=1;
}
isError=1;
} else {
var reg = /^([A-Za-z0-9_\\-\\.])+\\@([A-Za-z0-9_\\-\\.])+\\.([A-Za-z]{2,4})$/;
if(reg.test(email)==false) {
$('#contactForm #errorEmail').html('Invalid email address.');
if(isFocus==0) {
$('#contactForm #email').focus();
isFocus=1;
}
isError=1;
}
}
if(subject=='') {
$('#contactForm #errorSubject').html('This is a required field.');
if(isFocus==0) {
$('#contactForm #subject').focus();
isFocus=1;
}
isError=1;
}
if(message=='') {
$('#contactForm #errorMessage').html('This is a required field.');
if(isFocus==0) {
$('#contactForm #message').focus();
isFocus=1;
}
isError=1;
}
// Terminate the script if an error is found
if(isError==1) {
$('#contactForm #formProgress').html('');
$('#contactForm #formProgress').hide();
// Activate the submit button
$('#contactForm #submit').attr("disabled", "");
return false;
}
$.ajaxSetup ({
cache: false
});
var dataString = 'name='+ name + '&email=' + email + '&subject=' + subject + '&message=' + message;
$.ajax({
type: "POST",
url: "php/submit-form-ajax.php",
data: dataString,
success: function(msg) {
//alert(msg);
// Check to see if the mail was successfully sent
if(msg=='Mail sent') {
// Update the progress bar
$('#contactForm #formProgress').html('<img src="images/ajax-complete.gif" alt="message sent" />').delay(2000).fadeOut(400);
// Clear the subject field and message textbox
$('#contactForm #name').val('');
$('#contactForm #email').val('');
$('#contactForm #subject').val('');
$('#contactForm #message').val('');
} else {
$('#contactForm #formProgress').html('');
alert('There was an error sending your email. Please try again.');
}
// Activate the submit button
$('#contactForm #submit').attr("disabled", "");
},
error: function(ob,errStr) {
$('#contactForm #formProgress').html('');
alert('There was an error sending your email. Please try again.');
// Activate the submit button
$('#contactForm #submit').attr("disabled", "");
}
});
return false;
});
});
Initially the form was conflicting with the lightbox 2 script I was using on one of the pages, I changed lightbox2 to the slimbox 2 (a lightbox clone that uses jQuery rather than Prototype) and now all is working fine.
I recently upgraded my hosting with GoDaddy and now this form no longer works. I have been in communication with the GoDaddy support team and they say…
“…We have identified an issue within your php5.ini file that is causing this to occur. When disabled, PHP works properly. We recommend that you review the scripting within your php5.ini file or disable it to resolve the issue…”
This is my first real delve into PHP and AJAX and I am not sure how to do what they suggest or even where php5.ini is.