Ik heb een contact formulier in Javascript.
De website draait ook op javascript en alles staat in 1 bestand, "index.html".
Nu heb ik een contact formulier nodig voor afspraak maken en voor een voor het de gewone contact pagina.
Nu kopiëerde ik de javascript code gewoon en maakte ik een nieuwe .js bestand met dezelfde code. Natuurlijk werkt dan beide formulieren niet meer, dit heb ik ook verholpen om bij het afspraken formuliertje een 2tje achter elke variabel te zetten, (Dus er zijn geen dubbele functies/variablen meer).
Nu werkt het emailen van beide formuliertjes goed alleen de "Bedankt pagina" of de "Uw bericht is verzonden pagina" weer niet.
Bij de contact pagina werkt het wel, bij het afspraken formuliertje niet.
U kunt het zelf testen op : #NOT
Hieronder de code:
index.html (Pagina Afspraak maken & Contact)
Als je meer van index.html nodig hebt moet je even in de broncode kijken, anders wordt de code telang.
Hier afspraak-form.js
[JS]$(function(){
$('.error2').fadeOut(0);
// reset form and hide all errors
$("a#clear2").click(function(){
$('.error2').fadeOut(0);
$('form#afspraak-form').clearForm2();
});
// show message error if after editing
// the name field contains improper value
$("input#name2").blur(function(){
if(validateInput2('name2')){
if(!validateName2()){
$("label#name2_error").fadeOut(0);
$("label#name2_error2").fadeIn(250);
}
}else{
$("label#name2_error2").fadeOut(0);
}
});
// show message error if after editing
// the email field contains improper value
$("input#email2").blur(function(){
if(validateInput2('email2')){
if(!validateEmail2()){
$("label#email2_error").fadeOut(0);
$("label#email2_error2").fadeIn(250);
}
}else{
$("label#email2_error2").fadeOut(0);
}
});
// show message error if after editing
// the phone field contains improper value
$("input#phone2").blur(function(){
if(validateInput2('phone2')){
if(!validatePhone2()){
$("label#phone2_error").fadeOut(0);
$("label#phone2_error2").fadeIn(250);
}
}else{
$("label#phone2_error2").fadeOut(0);
}
});
// show message error if after editing
// the message field contains improper value
$("textarea#message2").blur(function(){
if(validateTextArea2('message2')){
if(!validateMessage2()){
$("label#message2_error").fadeOut(0);
$("label#message2_error2").fadeIn(250);
}
}else{
$("label#message2_error2").fadeOut(0);
}
});
$("input#name2").keydown(function(){
if(validateInput2('name2')){
$("label#name2_error").fadeOut(0);
}
if(validateName2()){
$("label#name2_error2").fadeOut(0);
}
});
$("input#email2").keydown(function(){
if(validateInput2('email2')){
$("label#email2_error").fadeOut(0);
}
if(validateEmail2()){
$("label#email2_error2").fadeOut(0);
}
});
$("input#phone2").keydown(function(){
if(validateInput2('phone2')){
$("label#phone2_error").fadeOut(0);
}
if(validatePhone2()){
$("label#phone2_error2").fadeOut(0);
}
});
$("textarea#message2").keydown(function(){
if(validateTextArea2('message2')){
$("label#message2_error").fadeOut(0);
}
if(validateMessage2()){
$("label#message2_error2").fadeOut(0);
}
});
var owner_email2 = $("input#owner_email2").val();
if(!isValidEmailAddress2(owner_email2)){
$('#afspraak_form').html("<label class='error2'>*Owner email is not valid</label>")
}
$("a#submit2").click(function(){
// validate and process form
var quit2 = false;
if(validateName2()){
name2 = validateName2();
$("label#name2_error").fadeOut(0);
$("label#name2_error2").fadeOut(0);
}else if(validateInput2('name2')){
$("label#name2_error").fadeOut(0);
$("label#name2_error2").fadeIn(250);
quit2 = true;
}else{
$("label#name2_error").fadeIn(250);
$("label#name2_error2").fadeOut(0);
quit2 = true;
}
if(validateEmail2()){
email2 = validateEmail2();
$("label#email2_error").fadeOut(0);
$("label#email2_error2").fadeOut(0);
}else if(validateInput2('email2')){
$("label#email2_error").fadeOut(0);
$("label#email2_error2").fadeIn(250);
quit2 = true;
}else{
$("label#email2_error").fadeIn(250);
$("label#email2_error2").fadeOut(0);
quit2 = true;
}
if(validatePhone2()){
phone2 = validatePhone2();
$("label#phone2_error").fadeOut(0);
$("label#phone2_error2").fadeOut(0);
}else if(validateInput2('phone2')){
$("label#phone2_error").fadeOut(0);
$("label#phone2_error2").fadeIn(250);
quit2 = true;
}else{
$("label#phone2_error").fadeIn(250);
$("label#phone2_error2").fadeOut(0);
quit2 = true;
}
if(validateMessage2()){
message2 = validateMessage2();
$("label#message2_error").fadeOut(0);
$("label#message2_error2").fadeOut(0);
}else if(validateTextArea2('message2')){
$("label#message2_error").fadeOut(0);
$("label#message2_error2").fadeIn(250);
quit2 = true;
}else{
$("label#message2_error").fadeIn(250);
$("label#message2_error2").fadeOut(0);
quit2 = true;
}
if(quit2){
return false;
}
var stripHTML = $("input#stripHTML").val();
var smtpMailServer = $("input#smtpMailServer").val();
var dataString = 'name2=' + name2 + '&email2=' + email2 + '&phone2=' + phone2 + '&message2=' + message2 + '&owner_email2=' + owner_email2 + '&stripHTML=' + stripHTML + '&smtpMailServer=' + smtpMailServer;
var serverProcessorType = $("input#serverProcessorType").val();
if(serverProcessorType == 'asp'){
fileExtension = 'ashx';
}else{
fileExtension = serverProcessorType;
}
var mailHandlerURL = "bin/MailHandler." + fileExtension;
$.ajax({
type: "POST",
url: "afspraak.php",
data: dataString,
success: function(){
$('.error2').fadeOut(0);
$('form#afspraak-form').css({display:'none'});
if (fl) {$('#new_message').fadeIn();} else
{ fl=true
jQuery('#afspraak_form').append('<div id="new_message"></div>')
$('#new_message').append("<div class='download-box'><p>E-mail verzonden!</p></div>");
$('#new_message').append("<br><label for='message'><span class='font1'>U krijgt zo snel mogelijk een reactie.</span></label>")
.fadeOut(0)
.fadeIn(1500, function(){
$('#new_message').append("<br><br><a href='javascript:' id='back' class='link1' onClick='click_back()' >terug</a>");
});
}
}
});
return false;
});
});
$.fn.clearForm = function(){
return this.each(function(){
var type = this.type, tag = this.tagName.toLowerCase();
if (tag == 'form'){
return $(':input',this).clearForm();
}
if (type == 'text' || type == 'password' || tag == 'textarea'){
this.value = '';
}else if (type == 'checkbox' || type == 'radio'){
this.checked = false;
}else if (tag == 'select'){
this.selectedIndex = -1;
}
});
};
function isValidName2(name2){
var pattern = new RegExp(/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/);
return pattern.test(name2);
}
function isValidEmailAddress2(emailAddress2){
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(emailAddress2);
}
function isValidPhoneNumber2(phoneNumber2){
var pattern = new RegExp(/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/);
return pattern.test(phoneNumber2);
}
function validateName2(){
var name2 = $("input#name2").val();
if(isValidName2(name2)){
return name2;
}else{
return false;
}
}
function validateEmail2(){
var email2 = $("input#email2").val();
if(!isValidEmailAddress2(email2)){
return false;
}else{
return email2;
}
}
function validatePhone2(){
var phone2 = $("input#phone2").val();
if(!isValidPhoneNumber2(phone2)){
return false;
}else{
return phone2;
}
}
function validateMessage2(){
var message2 = $("textarea#message2").val();
if(message2.length <= 19){
return false;
}else{
return message2;
}
}
// make sure visitor does not input a blank field
function validateInput2(field2){
var fieldObject2 = $("input#" + field2 + "").val();
if(fieldObject2.length < 1){
return false;
}else{
return true;
}
}
function validateTextArea2(field2){
var fieldObject2 = $("textarea#" + field2 + "").val();
if(fieldObject2.length < 1){
return false;
}else{
return true;
}
}
var fl2=false;
function click_back2(){
$('#new_message2').css({display:'none'});
$('form#afspraak-form').clearForm();
$('form#afspraak-form').fadeIn();
}[/JS]
en contact-form.js
[JS]$(function(){
$('.error').fadeOut(0);
// reset form and hide all errors
$("a#clear").click(function(){
$('.error').fadeOut(0);
$('form#contact-form').clearForm();
});
// show message error if after editing
// the name field contains improper value
$("input#name").blur(function(){
if(validateInput('name')){
if(!validateName()){
$("label#name_error").fadeOut(0);
$("label#name_error2").fadeIn(250);
}
}else{
$("label#name_error2").fadeOut(0);
}
});
// show message error if after editing
// the email field contains improper value
$("input#email").blur(function(){
if(validateInput('email')){
if(!validateEmail()){
$("label#email_error").fadeOut(0);
$("label#email_error2").fadeIn(250);
}
}else{
$("label#email_error2").fadeOut(0);
}
});
// show message error if after editing
// the phone field contains improper value
$("input#phone").blur(function(){
if(validateInput('phone')){
if(!validatePhone()){
$("label#phone_error").fadeOut(0);
$("label#phone_error2").fadeIn(250);
}
}else{
$("label#phone_error2").fadeOut(0);
}
});
// show message error if after editing
// the message field contains improper value
$("textarea#message").blur(function(){
if(validateTextArea('message')){
if(!validateMessage()){
$("label#message_error").fadeOut(0);
$("label#message_error2").fadeIn(250);
}
}else{
$("label#message_error2").fadeOut(0);
}
});
$("input#name").keydown(function(){
if(validateInput('name')){
$("label#name_error").fadeOut(0);
}
if(validateName()){
$("label#name_error2").fadeOut(0);
}
});
$("input#email").keydown(function(){
if(validateInput('email')){
$("label#email_error").fadeOut(0);
}
if(validateEmail()){
$("label#email_error2").fadeOut(0);
}
});
$("input#phone").keydown(function(){
if(validateInput('phone')){
$("label#phone_error").fadeOut(0);
}
if(validatePhone()){
$("label#phone_error2").fadeOut(0);
}
});
$("textarea#message").keydown(function(){
if(validateTextArea('message')){
$("label#message_error").fadeOut(0);
}
if(validateMessage()){
$("label#message_error2").fadeOut(0);
}
});
var owner_email = $("input#owner_email").val();
if(!isValidEmailAddress(owner_email)){
$('#contact_form').html("<label class='error'>*Owner email is not valid</label>")
}
$("a#submit").click(function(){
// validate and process form
var quit = false;
if(validateName()){
name = validateName();
$("label#name_error").fadeOut(0);
$("label#name_error2").fadeOut(0);
}else if(validateInput('name')){
$("label#name_error").fadeOut(0);
$("label#name_error2").fadeIn(250);
quit = true;
}else{
$("label#name_error").fadeIn(250);
$("label#name_error2").fadeOut(0);
quit = true;
}
if(validateEmail()){
email = validateEmail();
$("label#email_error").fadeOut(0);
$("label#email_error2").fadeOut(0);
}else if(validateInput('email')){
$("label#email_error").fadeOut(0);
$("label#email_error2").fadeIn(250);
quit = true;
}else{
$("label#email_error").fadeIn(250);
$("label#email_error2").fadeOut(0);
quit = true;
}
if(validatePhone()){
phone = validatePhone();
$("label#phone_error").fadeOut(0);
$("label#phone_error2").fadeOut(0);
}else if(validateInput('phone')){
$("label#phone_error").fadeOut(0);
$("label#phone_error2").fadeIn(250);
quit = true;
}else{
$("label#phone_error").fadeIn(250);
$("label#phone_error2").fadeOut(0);
quit = true;
}
if(validateMessage()){
message = validateMessage();
$("label#message_error").fadeOut(0);
$("label#message_error2").fadeOut(0);
}else if(validateTextArea('message')){
$("label#message_error").fadeOut(0);
$("label#message_error2").fadeIn(250);
quit = true;
}else{
$("label#message_error").fadeIn(250);
$("label#message_error2").fadeOut(0);
quit = true;
}
if(quit){
return false;
}
var stripHTML = $("input#stripHTML").val();
var smtpMailServer = $("input#smtpMailServer").val();
var dataString = 'name=' + name + '&email=' + email + '&phone=' + phone + '&message=' + message + '&owner_email=' + owner_email + '&stripHTML=' + stripHTML + '&smtpMailServer=' + smtpMailServer;
var serverProcessorType = $("input#serverProcessorType").val();
if(serverProcessorType == 'asp'){
fileExtension = 'ashx';
}else{
fileExtension = serverProcessorType;
}
var mailHandlerURL = "bin/MailHandler." + fileExtension;
$.ajax({
type: "POST",
url: "contact.php",
data: dataString,
success: function(){
$('.error').fadeOut(0);
$('form#contact-form').css({display:'none'});
if (fl) {$('#new_message').fadeIn();} else
{ fl=true
jQuery('#contact_form').append('<div id="new_message"></div>')
$('#new_message').append("<div class='download-box'><p>E-mail verzonden!</p></div>");
$('#new_message').append("<br><label for='message'><span class='font1'>U krijgt zo snel mogelijk een reactie.</span></label>")
.fadeOut(0)
.fadeIn(1500, function(){
$('#new_message').append("<br><br><a href='javascript:' id='back' class='link1' onClick='click_back()' >terug</a>");
});
}
}
});
return false;
});
});
$.fn.clearForm = function(){
return this.each(function(){
var type = this.type, tag = this.tagName.toLowerCase();
if (tag == 'form'){
return $(':input',this).clearForm();
}
if (type == 'text' || type == 'password' || tag == 'textarea'){
this.value = '';
}else if (type == 'checkbox' || type == 'radio'){
this.checked = false;
}else if (tag == 'select'){
this.selectedIndex = -1;
}
});
};
function isValidName(name){
var pattern = new RegExp(/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/);
return pattern.test(name);
}
function isValidEmailAddress(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);
}
function isValidPhoneNumber(phoneNumber){
var pattern = new RegExp(/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/);
return pattern.test(phoneNumber);
}
function validateName(){
var name = $("input#name").val();
if(isValidName(name)){
return name;
}else{
return false;
}
}
function validateEmail(){
var email = $("input#email").val();
if(!isValidEmailAddress(email)){
return false;
}else{
return email;
}
}
function validatePhone(){
var phone = $("input#phone").val();
if(!isValidPhoneNumber(phone)){
return false;
}else{
return phone;
}
}
function validateMessage(){
var message = $("textarea#message").val();
if(message.length <= 19){
return false;
}else{
return message;
}
}
// make sure visitor does not input a blank field
function validateInput(field){
var fieldObject = $("input#" + field + "").val();
if(fieldObject.length < 1){
return false;
}else{
return true;
}
}
function validateTextArea(field){
var fieldObject = $("textarea#" + field + "").val();
if(fieldObject.length < 1){
return false;
}else{
return true;
}
}
var fl=false;
function click_back(){
$('#new_message').css({display:'none'});
$('form#contact-form').clearForm();
$('form#contact-form').fadeIn();
}[/JS]
De style is niet nodig denk ik?
Ik hoop graag op een antwoord, want ik heb al erg lang liggen te klungelen met dit probleem.
Mvg, PAtrick
De website draait ook op javascript en alles staat in 1 bestand, "index.html".
Nu heb ik een contact formulier nodig voor afspraak maken en voor een voor het de gewone contact pagina.
Nu kopiëerde ik de javascript code gewoon en maakte ik een nieuwe .js bestand met dezelfde code. Natuurlijk werkt dan beide formulieren niet meer, dit heb ik ook verholpen om bij het afspraken formuliertje een 2tje achter elke variabel te zetten, (Dus er zijn geen dubbele functies/variablen meer).
Nu werkt het emailen van beide formuliertjes goed alleen de "Bedankt pagina" of de "Uw bericht is verzonden pagina" weer niet.
Bij de contact pagina werkt het wel, bij het afspraken formuliertje niet.
U kunt het zelf testen op : #NOT
Hieronder de code:
index.html (Pagina Afspraak maken & Contact)
HTML:
<li id="page_Afspraak">
<div class="scroll">
<div class="scroll5">
<div class="grid_8">
<div class="box">
<div class="pad">
<h2><strong>Afspraak maken</strong></h2>
<form id="afspraak-form" method="post" class="main-contacts">
<fieldset>
<input type="hidden" name="owner_email" id="owner_email" value="info@.nl" />
<input type="hidden" name="serverProcessorType" id="serverProcessorType" value="php" />
<input type="hidden" name="smtpMailServer" id="smtpMailServer" value="localhost" />
<input type="hidden" name="stripHTML" id="stripHTML" value="true" />
<div class="rowElem">
<div class="bg">
<input type="text" name="name2" id="name2" value="Uw naam:" onblur="if(this.value=='') this.value='Uw naam:'" onFocus="if(this.value =='Uw naam:' ) this.value=''" >
</div>
<label class="error2" for="name2" id="name2_error">* Uw naam is mogelijk incorrect.</label>
<label class="error2" for="name2" id="name2_error2">* Uw naam is mogelijk incorrect.</label>
</div>
<div class="rowElem">
<div class="bg">
<input type="text" name="phone2" id="phone2" value="Telefoonnummer:" onblur="if(this.value=='') this.value='Telefoonnummer:'" onFocus="if(this.value =='Telefoonnummer:' ) this.value=''" >
</div>
<label class="error2" for="phone2" id="phone2_error">* Uw telefoonnummer is mogelijk incorrect.</label>
<label class="error2" for="phone2" id="phone2_error2">* Uw telefoonnummer is mogelijk incorrect.</label>
</div>
<div class="rowElem">
<div class="bg">
<input type="text" name="email2" id="email2" value="E-mail:" onblur="if(this.value=='') this.value='E-mail:'" onFocus="if(this.value =='E-mail:' ) this.value=''">
</div>
<label class="error2" for="email2" id="email2_error">* Uw E-mail is mogelijk incorrect.</label>
<label class="error2" for="email2" id="email2_error2">* Uw E-mail is mogelijk incorrect.</label>
</div>
<div class="rowElem">
<div class="bg">
<input type="text" name="date" id="date" value="Datum:" onblur="if(this.value=='') this.value='Datum:'" onFocus="if(this.value =='Datum:' ) this.value=''">
</div>
<label class="error2" for="date" id="date_error">* Uw datum is mogelijk incorrect.</label>
<label class="error2" for="date" id="date_error2">* Uw datum is mogelijk incorrect.</label>
</div>
<div class="textarea-box">
<div class="bg">
<textarea cols="1" rows="1" name="message2" id="message2" onBlur="if(this.value=='') this.value='Bericht:'" onFocus="if(this.value =='Bericht:' ) this.value=''" >Bericht:</textarea>
</div>
<label class="error2" for="message2" id="message2_error">* Uw bericht is leeg.</label>
<label class="error2" for="message2" id="message2_error2">* Uw bericht is te kort.</label>
</div>
<a href="#" id="submit2" class="button">verstuur</a>
<a href="#" id="clear2" class="button">opnieuw</a>
</fieldset>
</form>
</div>
</div>
</div>
<div class="grid_6">
<a href="#" class="close" data-type="close"></a>
<div class="box">
<h2 class="pad_left1"><strong>Informatie </strong></h2>
<div class="pad">
<p class="address"><span class="color1">
Wanneer u na de behandeling een nieuwe afspraak maakt die binnen 6 weken plaatsvindt, krijgt u er 5 % korting op. <br /><br />
Deze actie is niet geldig in combinatie met andere acties.<br /><br />
Er wordt uitsluitend op afspraak gewerkt waarmee verzekerd is dat voor een behandeling alle tijd kan worden gereserveerd. <br /><br />
U kunt voor zowel overdag als ’s avonds een afspraak maken.
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</li>
<li id="page_Contact">
<div class="scroll">
<div class="scroll5">
<div class="grid_8">
<div class="box">
<div class="pad">
<h2><strong>Contact</strong></h2>
<div id="contact_form">
<form id="contact-form" method="post" class="main-contacts">
<fieldset>
<input type="hidden" name="owner_email" id="owner_email" value="info@.nl" />
<input type="hidden" name="serverProcessorType" id="serverProcessorType" value="php" />
<input type="hidden" name="smtpMailServer" id="smtpMailServer" value="localhost" />
<input type="hidden" name="stripHTML" id="stripHTML" value="true" />
<div class="rowElem">
<div class="bg">
<input type="text" name="name" id="name" value="Uw naam:" onblur="if(this.value=='') this.value='Uw naam:'" onFocus="if(this.value =='Uw naam:' ) this.value=''" >
</div>
<label class="error" for="name" id="name_error">* Uw naam is mogelijk incorrect.</label>
<label class="error" for="name" id="name_error2">* Uw naam is mogelijk incorrect.</label>
</div>
<div class="rowElem">
<div class="bg">
<input type="text" name="phone" id="phone" value="Telefoonnummer:" onblur="if(this.value=='') this.value='Telefoonnummer:'" onFocus="if(this.value =='Telefoonnummer:' ) this.value=''" >
</div>
<label class="error" for="phone" id="phone_error">* Uw telefoonnummer is mogelijk incorrect.</label>
<label class="error" for="phone" id="phone_error2">* Uw telefoonnummer is mogelijk incorrect.</label>
</div>
<div class="rowElem">
<div class="bg">
<input type="text" name="email" id="email" value="E-mail:" onblur="if(this.value=='') this.value='E-mail:'" onFocus="if(this.value =='E-mail:' ) this.value=''">
</div>
<label class="error" for="email" id="email_error">* Uw E-mail is mogelijk incorrect.</label>
<label class="error" for="email" id="email_error2">* Uw E-mail is mogelijk incorrect.</label>
</div>
<div class="textarea-box">
<div class="bg">
<textarea cols="1" rows="1" name="message" id="message" onBlur="if(this.value=='') this.value='Bericht:'" onFocus="if(this.value =='Bericht:' ) this.value=''" >Bericht:</textarea>
</div>
<label class="error" for="message" id="message_error">* Uw bericht is leeg.</label>
<label class="error" for="message" id="message_error2">* Uw bericht is te kort.</label>
</div>
<a href="#" id="submit" class="button">verstuur</a>
<a href="#" id="clear" class="button">opnieuw</a>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<div class="grid_6">
<a href="#" class="close" data-type="close"></a>
<div class="box">
<h2 class="pad_left1"><strong>Routebeschrijving</strong></h2>
<div class="pad">
<figure class="pad_bot1"><a href="http://g.co/maps/c8fpv" target="_blank"><img src="images/map.png"></a></figure>
<p class="address"><span class="color1"><strong></strong> <br><br />
Randweg - Oost 35<br />
6021 PA Budel</span> <br>
<span class="right2">06-20207257</span>Telefoon:<br>
<span class="right2">53493028</span>KvK: <br>
E-mail: <a href="mailto:">info@.nl</a></p>
</div>
</div>
</div>
</div>
</div>
</li>Als je meer van index.html nodig hebt moet je even in de broncode kijken, anders wordt de code telang.
Hier afspraak-form.js
[JS]$(function(){
$('.error2').fadeOut(0);
// reset form and hide all errors
$("a#clear2").click(function(){
$('.error2').fadeOut(0);
$('form#afspraak-form').clearForm2();
});
// show message error if after editing
// the name field contains improper value
$("input#name2").blur(function(){
if(validateInput2('name2')){
if(!validateName2()){
$("label#name2_error").fadeOut(0);
$("label#name2_error2").fadeIn(250);
}
}else{
$("label#name2_error2").fadeOut(0);
}
});
// show message error if after editing
// the email field contains improper value
$("input#email2").blur(function(){
if(validateInput2('email2')){
if(!validateEmail2()){
$("label#email2_error").fadeOut(0);
$("label#email2_error2").fadeIn(250);
}
}else{
$("label#email2_error2").fadeOut(0);
}
});
// show message error if after editing
// the phone field contains improper value
$("input#phone2").blur(function(){
if(validateInput2('phone2')){
if(!validatePhone2()){
$("label#phone2_error").fadeOut(0);
$("label#phone2_error2").fadeIn(250);
}
}else{
$("label#phone2_error2").fadeOut(0);
}
});
// show message error if after editing
// the message field contains improper value
$("textarea#message2").blur(function(){
if(validateTextArea2('message2')){
if(!validateMessage2()){
$("label#message2_error").fadeOut(0);
$("label#message2_error2").fadeIn(250);
}
}else{
$("label#message2_error2").fadeOut(0);
}
});
$("input#name2").keydown(function(){
if(validateInput2('name2')){
$("label#name2_error").fadeOut(0);
}
if(validateName2()){
$("label#name2_error2").fadeOut(0);
}
});
$("input#email2").keydown(function(){
if(validateInput2('email2')){
$("label#email2_error").fadeOut(0);
}
if(validateEmail2()){
$("label#email2_error2").fadeOut(0);
}
});
$("input#phone2").keydown(function(){
if(validateInput2('phone2')){
$("label#phone2_error").fadeOut(0);
}
if(validatePhone2()){
$("label#phone2_error2").fadeOut(0);
}
});
$("textarea#message2").keydown(function(){
if(validateTextArea2('message2')){
$("label#message2_error").fadeOut(0);
}
if(validateMessage2()){
$("label#message2_error2").fadeOut(0);
}
});
var owner_email2 = $("input#owner_email2").val();
if(!isValidEmailAddress2(owner_email2)){
$('#afspraak_form').html("<label class='error2'>*Owner email is not valid</label>")
}
$("a#submit2").click(function(){
// validate and process form
var quit2 = false;
if(validateName2()){
name2 = validateName2();
$("label#name2_error").fadeOut(0);
$("label#name2_error2").fadeOut(0);
}else if(validateInput2('name2')){
$("label#name2_error").fadeOut(0);
$("label#name2_error2").fadeIn(250);
quit2 = true;
}else{
$("label#name2_error").fadeIn(250);
$("label#name2_error2").fadeOut(0);
quit2 = true;
}
if(validateEmail2()){
email2 = validateEmail2();
$("label#email2_error").fadeOut(0);
$("label#email2_error2").fadeOut(0);
}else if(validateInput2('email2')){
$("label#email2_error").fadeOut(0);
$("label#email2_error2").fadeIn(250);
quit2 = true;
}else{
$("label#email2_error").fadeIn(250);
$("label#email2_error2").fadeOut(0);
quit2 = true;
}
if(validatePhone2()){
phone2 = validatePhone2();
$("label#phone2_error").fadeOut(0);
$("label#phone2_error2").fadeOut(0);
}else if(validateInput2('phone2')){
$("label#phone2_error").fadeOut(0);
$("label#phone2_error2").fadeIn(250);
quit2 = true;
}else{
$("label#phone2_error").fadeIn(250);
$("label#phone2_error2").fadeOut(0);
quit2 = true;
}
if(validateMessage2()){
message2 = validateMessage2();
$("label#message2_error").fadeOut(0);
$("label#message2_error2").fadeOut(0);
}else if(validateTextArea2('message2')){
$("label#message2_error").fadeOut(0);
$("label#message2_error2").fadeIn(250);
quit2 = true;
}else{
$("label#message2_error").fadeIn(250);
$("label#message2_error2").fadeOut(0);
quit2 = true;
}
if(quit2){
return false;
}
var stripHTML = $("input#stripHTML").val();
var smtpMailServer = $("input#smtpMailServer").val();
var dataString = 'name2=' + name2 + '&email2=' + email2 + '&phone2=' + phone2 + '&message2=' + message2 + '&owner_email2=' + owner_email2 + '&stripHTML=' + stripHTML + '&smtpMailServer=' + smtpMailServer;
var serverProcessorType = $("input#serverProcessorType").val();
if(serverProcessorType == 'asp'){
fileExtension = 'ashx';
}else{
fileExtension = serverProcessorType;
}
var mailHandlerURL = "bin/MailHandler." + fileExtension;
$.ajax({
type: "POST",
url: "afspraak.php",
data: dataString,
success: function(){
$('.error2').fadeOut(0);
$('form#afspraak-form').css({display:'none'});
if (fl) {$('#new_message').fadeIn();} else
{ fl=true
jQuery('#afspraak_form').append('<div id="new_message"></div>')
$('#new_message').append("<div class='download-box'><p>E-mail verzonden!</p></div>");
$('#new_message').append("<br><label for='message'><span class='font1'>U krijgt zo snel mogelijk een reactie.</span></label>")
.fadeOut(0)
.fadeIn(1500, function(){
$('#new_message').append("<br><br><a href='javascript:' id='back' class='link1' onClick='click_back()' >terug</a>");
});
}
}
});
return false;
});
});
$.fn.clearForm = function(){
return this.each(function(){
var type = this.type, tag = this.tagName.toLowerCase();
if (tag == 'form'){
return $(':input',this).clearForm();
}
if (type == 'text' || type == 'password' || tag == 'textarea'){
this.value = '';
}else if (type == 'checkbox' || type == 'radio'){
this.checked = false;
}else if (tag == 'select'){
this.selectedIndex = -1;
}
});
};
function isValidName2(name2){
var pattern = new RegExp(/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/);
return pattern.test(name2);
}
function isValidEmailAddress2(emailAddress2){
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(emailAddress2);
}
function isValidPhoneNumber2(phoneNumber2){
var pattern = new RegExp(/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/);
return pattern.test(phoneNumber2);
}
function validateName2(){
var name2 = $("input#name2").val();
if(isValidName2(name2)){
return name2;
}else{
return false;
}
}
function validateEmail2(){
var email2 = $("input#email2").val();
if(!isValidEmailAddress2(email2)){
return false;
}else{
return email2;
}
}
function validatePhone2(){
var phone2 = $("input#phone2").val();
if(!isValidPhoneNumber2(phone2)){
return false;
}else{
return phone2;
}
}
function validateMessage2(){
var message2 = $("textarea#message2").val();
if(message2.length <= 19){
return false;
}else{
return message2;
}
}
// make sure visitor does not input a blank field
function validateInput2(field2){
var fieldObject2 = $("input#" + field2 + "").val();
if(fieldObject2.length < 1){
return false;
}else{
return true;
}
}
function validateTextArea2(field2){
var fieldObject2 = $("textarea#" + field2 + "").val();
if(fieldObject2.length < 1){
return false;
}else{
return true;
}
}
var fl2=false;
function click_back2(){
$('#new_message2').css({display:'none'});
$('form#afspraak-form').clearForm();
$('form#afspraak-form').fadeIn();
}[/JS]
en contact-form.js
[JS]$(function(){
$('.error').fadeOut(0);
// reset form and hide all errors
$("a#clear").click(function(){
$('.error').fadeOut(0);
$('form#contact-form').clearForm();
});
// show message error if after editing
// the name field contains improper value
$("input#name").blur(function(){
if(validateInput('name')){
if(!validateName()){
$("label#name_error").fadeOut(0);
$("label#name_error2").fadeIn(250);
}
}else{
$("label#name_error2").fadeOut(0);
}
});
// show message error if after editing
// the email field contains improper value
$("input#email").blur(function(){
if(validateInput('email')){
if(!validateEmail()){
$("label#email_error").fadeOut(0);
$("label#email_error2").fadeIn(250);
}
}else{
$("label#email_error2").fadeOut(0);
}
});
// show message error if after editing
// the phone field contains improper value
$("input#phone").blur(function(){
if(validateInput('phone')){
if(!validatePhone()){
$("label#phone_error").fadeOut(0);
$("label#phone_error2").fadeIn(250);
}
}else{
$("label#phone_error2").fadeOut(0);
}
});
// show message error if after editing
// the message field contains improper value
$("textarea#message").blur(function(){
if(validateTextArea('message')){
if(!validateMessage()){
$("label#message_error").fadeOut(0);
$("label#message_error2").fadeIn(250);
}
}else{
$("label#message_error2").fadeOut(0);
}
});
$("input#name").keydown(function(){
if(validateInput('name')){
$("label#name_error").fadeOut(0);
}
if(validateName()){
$("label#name_error2").fadeOut(0);
}
});
$("input#email").keydown(function(){
if(validateInput('email')){
$("label#email_error").fadeOut(0);
}
if(validateEmail()){
$("label#email_error2").fadeOut(0);
}
});
$("input#phone").keydown(function(){
if(validateInput('phone')){
$("label#phone_error").fadeOut(0);
}
if(validatePhone()){
$("label#phone_error2").fadeOut(0);
}
});
$("textarea#message").keydown(function(){
if(validateTextArea('message')){
$("label#message_error").fadeOut(0);
}
if(validateMessage()){
$("label#message_error2").fadeOut(0);
}
});
var owner_email = $("input#owner_email").val();
if(!isValidEmailAddress(owner_email)){
$('#contact_form').html("<label class='error'>*Owner email is not valid</label>")
}
$("a#submit").click(function(){
// validate and process form
var quit = false;
if(validateName()){
name = validateName();
$("label#name_error").fadeOut(0);
$("label#name_error2").fadeOut(0);
}else if(validateInput('name')){
$("label#name_error").fadeOut(0);
$("label#name_error2").fadeIn(250);
quit = true;
}else{
$("label#name_error").fadeIn(250);
$("label#name_error2").fadeOut(0);
quit = true;
}
if(validateEmail()){
email = validateEmail();
$("label#email_error").fadeOut(0);
$("label#email_error2").fadeOut(0);
}else if(validateInput('email')){
$("label#email_error").fadeOut(0);
$("label#email_error2").fadeIn(250);
quit = true;
}else{
$("label#email_error").fadeIn(250);
$("label#email_error2").fadeOut(0);
quit = true;
}
if(validatePhone()){
phone = validatePhone();
$("label#phone_error").fadeOut(0);
$("label#phone_error2").fadeOut(0);
}else if(validateInput('phone')){
$("label#phone_error").fadeOut(0);
$("label#phone_error2").fadeIn(250);
quit = true;
}else{
$("label#phone_error").fadeIn(250);
$("label#phone_error2").fadeOut(0);
quit = true;
}
if(validateMessage()){
message = validateMessage();
$("label#message_error").fadeOut(0);
$("label#message_error2").fadeOut(0);
}else if(validateTextArea('message')){
$("label#message_error").fadeOut(0);
$("label#message_error2").fadeIn(250);
quit = true;
}else{
$("label#message_error").fadeIn(250);
$("label#message_error2").fadeOut(0);
quit = true;
}
if(quit){
return false;
}
var stripHTML = $("input#stripHTML").val();
var smtpMailServer = $("input#smtpMailServer").val();
var dataString = 'name=' + name + '&email=' + email + '&phone=' + phone + '&message=' + message + '&owner_email=' + owner_email + '&stripHTML=' + stripHTML + '&smtpMailServer=' + smtpMailServer;
var serverProcessorType = $("input#serverProcessorType").val();
if(serverProcessorType == 'asp'){
fileExtension = 'ashx';
}else{
fileExtension = serverProcessorType;
}
var mailHandlerURL = "bin/MailHandler." + fileExtension;
$.ajax({
type: "POST",
url: "contact.php",
data: dataString,
success: function(){
$('.error').fadeOut(0);
$('form#contact-form').css({display:'none'});
if (fl) {$('#new_message').fadeIn();} else
{ fl=true
jQuery('#contact_form').append('<div id="new_message"></div>')
$('#new_message').append("<div class='download-box'><p>E-mail verzonden!</p></div>");
$('#new_message').append("<br><label for='message'><span class='font1'>U krijgt zo snel mogelijk een reactie.</span></label>")
.fadeOut(0)
.fadeIn(1500, function(){
$('#new_message').append("<br><br><a href='javascript:' id='back' class='link1' onClick='click_back()' >terug</a>");
});
}
}
});
return false;
});
});
$.fn.clearForm = function(){
return this.each(function(){
var type = this.type, tag = this.tagName.toLowerCase();
if (tag == 'form'){
return $(':input',this).clearForm();
}
if (type == 'text' || type == 'password' || tag == 'textarea'){
this.value = '';
}else if (type == 'checkbox' || type == 'radio'){
this.checked = false;
}else if (tag == 'select'){
this.selectedIndex = -1;
}
});
};
function isValidName(name){
var pattern = new RegExp(/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/);
return pattern.test(name);
}
function isValidEmailAddress(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);
}
function isValidPhoneNumber(phoneNumber){
var pattern = new RegExp(/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/);
return pattern.test(phoneNumber);
}
function validateName(){
var name = $("input#name").val();
if(isValidName(name)){
return name;
}else{
return false;
}
}
function validateEmail(){
var email = $("input#email").val();
if(!isValidEmailAddress(email)){
return false;
}else{
return email;
}
}
function validatePhone(){
var phone = $("input#phone").val();
if(!isValidPhoneNumber(phone)){
return false;
}else{
return phone;
}
}
function validateMessage(){
var message = $("textarea#message").val();
if(message.length <= 19){
return false;
}else{
return message;
}
}
// make sure visitor does not input a blank field
function validateInput(field){
var fieldObject = $("input#" + field + "").val();
if(fieldObject.length < 1){
return false;
}else{
return true;
}
}
function validateTextArea(field){
var fieldObject = $("textarea#" + field + "").val();
if(fieldObject.length < 1){
return false;
}else{
return true;
}
}
var fl=false;
function click_back(){
$('#new_message').css({display:'none'});
$('form#contact-form').clearForm();
$('form#contact-form').fadeIn();
}[/JS]
De style is niet nodig denk ik?
Ik hoop graag op een antwoord, want ik heb al erg lang liggen te klungelen met dit probleem.
Mvg, PAtrick
Laatst bewerkt:
