In the function validateCaptcha you have modified the first line
var a = getElemntById['id6_letters_code'].value;
This results in an error. My original statement was
var a = captcha.val();
Why the change?
Also would it be possible to get the form fields that are not filled out not to have a pop up but instead on the right hand side of the form a text message and the form hightlights in red ?
Your will need to add a style
.error {
color: #ff0000;
}
and modify the validation code
$(document).ready(function(){
// Code for validation of form content
var name = $("#idname");
var email = $("#idemail");
var message = $("#idmessage");
var captcha = $("#id6_letters_code");
name.blur(validateName);
email.blur(validateEmail);
message.blur(validateMessage);
captcha.blur(validateCaptcha);
function validateName() {
name.parent().find('.error').remove();
var a = name.val();
if (a.length < 3) {
return reporterrormessage(name, "Please supply your name");
}
return true;
}
function validateEmail() {
email.parent().find('.error').remove();
var a = email.val();
if (a.length == 0) {
return reporterrormessage(email, "An Email address must be supplied");
}
if (!/^[\\w\\.\\-]+@([\\w\\-]+\\.)+[a-zA-Z]+$/.test(a)) {
return reporterrormessage(email, "Email address is invalid");
}
return true;
}
function validateMessage() {
message.parent().find('.error').remove();
var a = message.val();
if (a.length < 10) {
return reporterrormessage(message, "Please complete the message field");
}
return true;
}
function validateCaptcha() {
captcha.parent().find('.error').remove();
var a = captcha.val();
if (a.length != 5) {
return reporterrormessage(captcha, "Captcha code is invalid");
}
return true;
}
function reporterrormessage (elem, msg) {
elem.parent().append('<span class="error">' + msg + '</span>');
elem.focus();
return false;
}
// End of Code for validation of form content
$("#contact_form").submit(function(e){
// Plus validation in submit
var invalid = !(validateName() && validateEmail() && validateMessage() && validateCaptcha());
if (invalid) return e.preventDefault();
$.post('/construction/submit.php', $(this).serialize(),
function(data){
var message;
if(parseInt(data)==-1)
message = "error";
else
{
$("#contact_form").hide('slow');
message = "Thank your for the message";
}
$("#contact_form").before('<p>' + message + '</p>');
}
);
e.preventDefault();
});
});
Hope you are learning something from this exercise 
Hi, I may be misunderstanding on what you wrote here. I have the following Javascript for the CAPTCHA;
function validateCaptcha() {
captcha.parent().find('.error').remove();
var a = captcha.val();
if (a.length != 5) {
return reporterrormessage(captcha, "Captcha code is invalid");
}
return true;
}
The javascript continues not to submit the form data ! I am learning, taking it one step at a time but learning
I think the error is probably occurring in submit.php
I was getting the message
<br />
<b>Fatal error</b>: Class 'SMTP_validateEmail' not found in <b>/home/thecreat/public_html/construction/submit.php</b> on line <b>77</b><br />
Let me look into it. What about the CAPTCHA code you were talking about ?
What about the CAPTCHA code you were talking about ?
Are you referring to my comments on
var a = getElemntById['id6_letters_code'].value;
If so - we have replaced the code with what I posted to put the error message alongside the input area.
Hi, why isn’t the javascript communicating with the server PHP script I have. The form submits the thank-you message occurs but no email is sent.
As i posted before what is returned from submit.php is
<br />
<b>Fatal error</b>: Class 'SMTP_validateEmail' not found in <b>/home/thecreat/public_html/construction/submit.php</b> on line <b>77</b><br />
because it is not the value -1 it gives the thank you message. It might be sensible to change the code
message = "Thank your for the message";
to
message = data;
Philip, as seen on the page I is it possible to not only have the error message if an area of the form is skipped but the form box turn red ? Once the thank you message occurs a delay of 3-4 seconds and the page gets redirected to the main page.
You need to add a style
.fldinerror {
border: 1px solid #ff0000;
}
and then use the modified javascript
<script type="text/javascript">
<!--
$(document).ready(function(){
// Code for validation of form content
var name = $("#idname");
var email = $("#idemail");
var message = $("#idmessage");
var captcha = $("#id6_letters_code");
name.blur(validateName);
email.blur(validateEmail);
message.blur(validateMessage);
captcha.blur(validateCaptcha);
function validateName() {
name.parent().find('.error').remove();
name.removeClass("fldinerror");
var a = name.val();
if (a.length < 3) {
return reporterrormessage(name, "Please supply your name");
}
return true;
}
function validateEmail() {
email.parent().find('.error').remove();
email.removeClass("fldinerror");
var a = email.val();
if (a.length == 0) {
return reporterrormessage(email, "An Email address must be supplied");
}
if (!/^[\\w\\.\\-]+@([\\w\\-]+\\.)+[a-zA-Z]+$/.test(a)) {
return reporterrormessage(email, "Email address is invalid");
}
return true;
}
function validateMessage() {
message.parent().find('.error').remove();
message.removeClass("fldinerror");
var a = message.val();
if (a.length < 10) {
return reporterrormessage(message, "Please complete the message field");
}
return true;
}
function validateCaptcha() {
captcha.parent().find('.error').remove();
captcha.removeClass("fldinerror");
var a = captcha.val();
if (a.length != 6) {
return reporterrormessage(captcha, "Captcha code is invalid");
}
return true;
}
function reporterrormessage (elem, msg) {
elem.addClass("fldinerror");
elem.parent().append('<span class="error">' + msg + '</span>');
elem.focus();
return false;
}
// End of Code for validation of form content
$("#contact_form").submit(function(e){
// Plus validation in submit
var invalid = !(validateName() && validateEmail() && validateMessage() && validateCaptcha());
if (invalid) return e.preventDefault();
$.post('/construction/submit.php', $(this).serialize(),
function(data){
var message;
if(parseInt(data)==-1)
message = "error";
else
{
$("#contact_form").hide('slow');
message = "Thank your for the message";
}
$("#contact_form").before('<p class="thankyou">' + message + '</p>');
setTimeout(function () {
$("#content").children().hide();
$("#contact_form").show();
$("#contact_form").parent().find('.thankyou').remove();
$("#intro").show();
}, 3000);
}
);
e.preventDefault();
});
});
// -->
</script>
Philip, I’m using this player for both videos and images, I was wondering if it was possible that If I created my own window in photoshop saved the slices as PNG and replaced the default look of the player for images and video although I’m not exactly sure what the dimensions would have to be etc.
Sorry not understanding the question. Can you explain with a lot more detail what you are trying to achieve and where. In particular what you are having difficulty with.
If you preview a movie on that link I supplied, the visual appearance of the player, from the background, close button and maybe even the player controls I’d like to change graphically and replace.
These are components which I am not familiar but looking through the documentation what you wish to do is catered for - it might not be easy but it is catered for.
There are three pages which influence the interface.
The first is in you html code where you have
<li><a class="video_link" title="Image A" name="" href="./site_construction_a.php_files/tour_video.png" rel="gallery">
<img height="75" width="123" alt="truck" src="./site_construction_a.php_files/tour_video.png"></a></li>
The <img> tag gives the initial image that appears on the page. You can replace with a image file which more closely reflects the content of the video.
Fancybox is the pop up dialog into which the Flowplayer is placed. The ways in which fancybox can be tailored are described at Fancybox - Fancy lightbox alternative| API & Options.
Tailoring of Flowplayer is described (or more actually is beginning to be explained) at Flowplayer - Flash Video Player for the Web. There are simple things you can do and much more complicated things.
Hope that helps.
Fancybox is the pop up dialog into which the Flowplayer is placed. The ways in which fancybox can be tailored are described at Fancybox - Fancy lightbox alternative| API & Options.
Hi, I can’t remember if I had read this in the documentation or not. I understand that this adjusts how Fancybox overall functionality works, as in how fast the player moves onto the screen, video resize etc.
Tailoring of Flowplayer is described (or more actually is beginning to be explained) at Flowplayer - Flash Video Player for the Web. There are simple things you can do and much more complicated things.
Correct me if I’m wrong, but to adjust the physical make up of the player I’d have to purchase flowplayer ? There is no way to change the physical graphical display without buying flow player, I think someone told me this in another thread but I must have forgot.
I’d have to purchase flowplayer
I’m not getting that impression. You can do a lot without purchasing what you cannot do is get rid of the flowplayer branding. $95 will do that for you.
Branding as in the text that appears on the player. I’m probably not following on how you change it currently the player has a black with white border, you’re saying that can be changed, using the options on this page to replace with my own graphic I create. When you download the player each PNG image is sliced up, I don’t understand ?
You don’t need jQuery at all.
<?php
if(!isset($_POST['yourSubmitButton'])){?>
<form action="site_construction_a.php" method="post">
// form code here
</form>
<?php } else {
// set vars, error check, send msg
}?>
rGuy, I’m lost where this came in ?
rGuy, I’m lost where this came in ?
This stems back to one of my original posts
There are three techniques I can envisage
-
Instead of the action being thank-you.html make it thank-you.php and return the same page with the thank you message in place of the form.
-
Put the form within an <iframe> the html for the form would have to be in a separate url, contact-form.html (for example), and would be displayed in the iframe.
-
Use javascript probably in the guise of jquery.
The order indicates my preference and probably the order of difficultly. In your post you seem to be indicating the third route as your preferred on. What has influenced you in that decision?
We have developed the third option. rGuy is with me and advocating the first.