Form help
Posted: Wed Mar 14, 2012 1:02 am
Probably getting boring, but I'm developing a site for a friend (http://www.ututor.com.au)
I am using a PHP file (MailHandler) and a forms.JS and HTML
I am TRYING to get the select drop down menu to work, but no luck.
Basically, I want it to accept a choice of day of week and preferred time for students to book a session
HTML is:
<form id="contact-form">
<fieldset>
<div class="wrapper">
<div class="success"> Contact form submitted! <br>
<strong class="color-4">We will be in touch soon.</strong> </div>
</div>
<div class="field">
<label class="name">
<input type="text" value="Name:">
<span class="error">*This is not a valid name.</span> <span class="empty">*This field is required.</span> </label>
</div>
<div class="field">
<label class="email">
<input type="text" value="E-mail:">
<span class="error">*This is not a valid email address.</span> <span class="empty">*This field is required.</span> </label>
</div>
<div class="field">
<label class="phone">
<input type="text" value="Phone:">
<span class="error">*This is not a valid phone number.</span> <span class="empty">*This field is required.</span> </label>
</div>
<div class="field">
<label class="subject">
<input type="text" value="Subject of study:">
<span class="error">*This is not a valid subject.</span> <span class="empty">*This field is required.</span> </label>
</div>
<div class="field">
<p>Preferred Tutoring Day</p>
<select name="days" size="1">
<option value="Option1">Monday</option>
<option value="Option2">Tuesday</option>
<option value="Option3">Wednesday</option>
<option value="Option4">Thursday</option>
<option value="Option5">Friday</option>
<option value="Option6">Saturday</option>
<option value="Option7">Sunday</option>
</select>
</div>
<div class="area">
<label class="message">
<p class="comments1">Please provide a detailed description of course topics and questions that you would like some help with. The more specific you are, the better your assigned tutor is able to prepare for your session.</p>
<textarea>Message must be a minimum of 20 characters:</textarea>
<span class="error">*The message is too short. Must be a minimum of 20 characters.</span> <span class="empty">*This field is required.</span>
</label>
PHP:
<?php
$owner_email = $_POST["owner_email"];
$headers = 'From:' . $_POST["email"];
$subject = 'A message from your site visitor ' . $_POST["name"];
$days = $POST['days'];
$messageBody = "";
if($_POST['name']!='nope'){
$messageBody .= '<p>Visitor: ' . $_POST["name"] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}
if($_POST['email']!='nope'){
$messageBody .= '<p>Email Address: ' . $_POST['email'] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}
if($_POST['state']!='nope'){
$messageBody .= '<p>State: ' . $_POST['state'] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}
if($_POST['phone']!='nope'){
$messageBody .= '<p>Phone Number: ' . $_POST['phone'] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}
if($_POST['subject']!='nope'){
$messageBody .= '<p>Subject of study: ' . $_POST["subject"] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}
if($_POST['days']!='nope'){
$messageBody .= '<p>Preferred day: ' . $_POST["days"] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}
if($_POST['fax']!='nope'){
$messageBody .= '<p>Fax Number: ' . $_POST['fax'] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}
if($_POST['message']!='nope'){
$messageBody .= '<p>Message: ' . $_POST['message'] . '</p>' . "\n";
}
if($_POST["stripHTML"] == 'true'){
$messageBody = strip_tags($messageBody);
}
try{
if(!mail($owner_email, $subject, $messageBody, $headers)){
throw new Exception('mail failed');
}else{
echo 'mail sent';
}
}catch(Exception $e){
echo $e->getMessage() ."\n";
}
?>
JS
(function($){
$.fn.extend({
forms:function(opt){
if(opt===undefined)
opt={}
this.each(function(){
var th=$(this),
data=th.data('forms'),
_={
errorCl:'error',
emptyCl:'empty',
invalidCl:'invalid',
successCl:'success',
successShow:'4000',
mailHandlerURL:'bin/MailHandler.php',
ownerEmail:'admin@ututor.com.au',
stripHTML:true,
smtpMailServer:'localhost',
targets:'input,textarea',
controls:'a[data-type=reset],a[data-type=submit]',
validate:true,
rx:{
".name":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
".state":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
".email":{rx:/^(("[\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,target:'input'},
".phone":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
".subject":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
".days":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
".fax":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
".message":{rx:/.{20}/,target:'textarea'}
},
preFu:function(){
_.labels.each(function(){
var label=$(this),
inp=$(_.targets,this),
defVal=inp.val(),
trueVal=(function(){
var tmp=inp.is('input')?(tmp=label.html().match(/value=['"](.+?)['"].+/),!!tmp&&!!tmp[1]&&tmp[1]):inp.html()
return defVal==''?defVal:tmp
})()
trueVal!=defVal
&&inp.val(defVal=trueVal||defVal)
label.data({defVal:defVal})
inp
.bind('focus',function(){
inp.val()==defVal
&&(inp.val(''),_.hideEmptyFu(label),label.removeClass(_.invalidCl))
})
.bind('blur',function(){
!inp.val()
?inp.val(defVal)
:(_.isValid(label)
?_.showErrorFu(label)
:_.hideErrorFu(label)),
(_.isEmpty(label)
?_.showEmptyFu(label)
:_.hideEmptyFu(label))
})
.bind('keyup',function(){
label.hasClass(_.invalidCl)
&&_.isValid(label)
?_.showErrorFu(label)
:_.hideErrorFu(label)
})
label.find('.'+_.errorCl+',.'+_.emptyCl).css({display:'block'}).hide()
})
_.success=$('.'+_.successCl,_.form).hide()
},
isValid:function(el){
var ret=true,
empt=_.isEmpty(el)
if(empt)
ret=false,
el.addClass(_.invalidCl)
else
$.each(_.rx,function(k,d){
if(el.is(k))
d.rx.test(el.find(d.target).val())
?(el.removeClass(_.invalidCl),ret=false)
:el.addClass(_.invalidCl)
})
return ret
},
isEmpty:function(el){
var tmp
return (tmp=el.find(_.targets).val())==''||tmp==el.data('defVal')
},
validateFu:function(){
_.labels.each(function(){
var th=$(this)
_.isEmpty(th)
?_.showEmptyFu(th)
:_.hideEmptyFu(th)
_.isValid(th)
?_.showErrorFu(th)
:_.hideErrorFu(th)
})
},
submitFu:function(){
_.validateFu()
if(!_.form.has('.'+_.invalidCl).length)
$.ajax({
type: "POST",
url:_.mailHandlerURL,
data:{
name:$('.name input',_.form).val()||'nope',
email:$('.email input',_.form).val()||'nope',
phone:$('.phone input',_.form).val()||'nope',
subject:$('.subject input',_.form).val()||'nope',
days:$('.days input',_.form).val()||'nope',
fax:$('.fax input',_.form).val()||'nope',
state:$('.state input',_.form).val()||'nope',
message:$('.message textarea',_.form).val()||'nope',
owner_email:_.ownerEmail,
stripHTML:_.stripHTML
},
success: function(){
_.showFu()
}
})
},
showFu:function(){
_.success.slideDown(function(){
setTimeout(function(){
_.success.slideUp()
_.form.trigger('reset')
},_.successShow)
})
},
controlsFu:function(){
$(_.controls,_.form).each(function(){
var th=$(this)
th
.bind('click',function(){
_.form.trigger(th.data('type'))
return false
})
})
},
showErrorFu:function(label){
label.find('.'+_.errorCl).slideDown()
},
hideErrorFu:function(label){
label.find('.'+_.errorCl).slideUp()
},
showEmptyFu:function(label){
label.find('.'+_.emptyCl).slideDown()
_.hideErrorFu(label)
},
hideEmptyFu:function(label){
label.find('.'+_.emptyCl).slideUp()
},
init:function(){
_.form=this
_.labels=$('label',_.form)
_.preFu()
_.controlsFu()
_.form
.bind('submit',function(){
if(_.validate)
_.submitFu()
else
_.form[0].submit()
return false
})
.bind('reset',function(){
_.labels.removeClass(_.invalidCl)
_.labels.each(function(){
var th=$(this)
_.hideErrorFu(th)
_.hideEmptyFu(th)
})
})
_.form.trigger('reset')
}
}
if(!data)
(typeof opt=='object'?$.extend(_,opt):_).init.call(th),
th.data({cScroll:_}),
data=_
else
_=typeof opt=='object'?$.extend(data,opt):data
})
return this
}
})
})(jQuery)
$(function(){
$('#contact-form').forms({
ownerEmail:'admin@ututor.com.au'
})
})
QUESTION:
How to get the drop down menu to work in the php. I;m OK with the HTML but what is required in PHP and JS additon?
Thanks
B
I am using a PHP file (MailHandler) and a forms.JS and HTML
I am TRYING to get the select drop down menu to work, but no luck.
Basically, I want it to accept a choice of day of week and preferred time for students to book a session
HTML is:
<form id="contact-form">
<fieldset>
<div class="wrapper">
<div class="success"> Contact form submitted! <br>
<strong class="color-4">We will be in touch soon.</strong> </div>
</div>
<div class="field">
<label class="name">
<input type="text" value="Name:">
<span class="error">*This is not a valid name.</span> <span class="empty">*This field is required.</span> </label>
</div>
<div class="field">
<label class="email">
<input type="text" value="E-mail:">
<span class="error">*This is not a valid email address.</span> <span class="empty">*This field is required.</span> </label>
</div>
<div class="field">
<label class="phone">
<input type="text" value="Phone:">
<span class="error">*This is not a valid phone number.</span> <span class="empty">*This field is required.</span> </label>
</div>
<div class="field">
<label class="subject">
<input type="text" value="Subject of study:">
<span class="error">*This is not a valid subject.</span> <span class="empty">*This field is required.</span> </label>
</div>
<div class="field">
<p>Preferred Tutoring Day</p>
<select name="days" size="1">
<option value="Option1">Monday</option>
<option value="Option2">Tuesday</option>
<option value="Option3">Wednesday</option>
<option value="Option4">Thursday</option>
<option value="Option5">Friday</option>
<option value="Option6">Saturday</option>
<option value="Option7">Sunday</option>
</select>
</div>
<div class="area">
<label class="message">
<p class="comments1">Please provide a detailed description of course topics and questions that you would like some help with. The more specific you are, the better your assigned tutor is able to prepare for your session.</p>
<textarea>Message must be a minimum of 20 characters:</textarea>
<span class="error">*The message is too short. Must be a minimum of 20 characters.</span> <span class="empty">*This field is required.</span>
</label>
PHP:
<?php
$owner_email = $_POST["owner_email"];
$headers = 'From:' . $_POST["email"];
$subject = 'A message from your site visitor ' . $_POST["name"];
$days = $POST['days'];
$messageBody = "";
if($_POST['name']!='nope'){
$messageBody .= '<p>Visitor: ' . $_POST["name"] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}
if($_POST['email']!='nope'){
$messageBody .= '<p>Email Address: ' . $_POST['email'] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}
if($_POST['state']!='nope'){
$messageBody .= '<p>State: ' . $_POST['state'] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}
if($_POST['phone']!='nope'){
$messageBody .= '<p>Phone Number: ' . $_POST['phone'] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}
if($_POST['subject']!='nope'){
$messageBody .= '<p>Subject of study: ' . $_POST["subject"] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}
if($_POST['days']!='nope'){
$messageBody .= '<p>Preferred day: ' . $_POST["days"] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}
if($_POST['fax']!='nope'){
$messageBody .= '<p>Fax Number: ' . $_POST['fax'] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
}
if($_POST['message']!='nope'){
$messageBody .= '<p>Message: ' . $_POST['message'] . '</p>' . "\n";
}
if($_POST["stripHTML"] == 'true'){
$messageBody = strip_tags($messageBody);
}
try{
if(!mail($owner_email, $subject, $messageBody, $headers)){
throw new Exception('mail failed');
}else{
echo 'mail sent';
}
}catch(Exception $e){
echo $e->getMessage() ."\n";
}
?>
JS
(function($){
$.fn.extend({
forms:function(opt){
if(opt===undefined)
opt={}
this.each(function(){
var th=$(this),
data=th.data('forms'),
_={
errorCl:'error',
emptyCl:'empty',
invalidCl:'invalid',
successCl:'success',
successShow:'4000',
mailHandlerURL:'bin/MailHandler.php',
ownerEmail:'admin@ututor.com.au',
stripHTML:true,
smtpMailServer:'localhost',
targets:'input,textarea',
controls:'a[data-type=reset],a[data-type=submit]',
validate:true,
rx:{
".name":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
".state":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
".email":{rx:/^(("[\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,target:'input'},
".phone":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
".subject":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
".days":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
".fax":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
".message":{rx:/.{20}/,target:'textarea'}
},
preFu:function(){
_.labels.each(function(){
var label=$(this),
inp=$(_.targets,this),
defVal=inp.val(),
trueVal=(function(){
var tmp=inp.is('input')?(tmp=label.html().match(/value=['"](.+?)['"].+/),!!tmp&&!!tmp[1]&&tmp[1]):inp.html()
return defVal==''?defVal:tmp
})()
trueVal!=defVal
&&inp.val(defVal=trueVal||defVal)
label.data({defVal:defVal})
inp
.bind('focus',function(){
inp.val()==defVal
&&(inp.val(''),_.hideEmptyFu(label),label.removeClass(_.invalidCl))
})
.bind('blur',function(){
!inp.val()
?inp.val(defVal)
:(_.isValid(label)
?_.showErrorFu(label)
:_.hideErrorFu(label)),
(_.isEmpty(label)
?_.showEmptyFu(label)
:_.hideEmptyFu(label))
})
.bind('keyup',function(){
label.hasClass(_.invalidCl)
&&_.isValid(label)
?_.showErrorFu(label)
:_.hideErrorFu(label)
})
label.find('.'+_.errorCl+',.'+_.emptyCl).css({display:'block'}).hide()
})
_.success=$('.'+_.successCl,_.form).hide()
},
isValid:function(el){
var ret=true,
empt=_.isEmpty(el)
if(empt)
ret=false,
el.addClass(_.invalidCl)
else
$.each(_.rx,function(k,d){
if(el.is(k))
d.rx.test(el.find(d.target).val())
?(el.removeClass(_.invalidCl),ret=false)
:el.addClass(_.invalidCl)
})
return ret
},
isEmpty:function(el){
var tmp
return (tmp=el.find(_.targets).val())==''||tmp==el.data('defVal')
},
validateFu:function(){
_.labels.each(function(){
var th=$(this)
_.isEmpty(th)
?_.showEmptyFu(th)
:_.hideEmptyFu(th)
_.isValid(th)
?_.showErrorFu(th)
:_.hideErrorFu(th)
})
},
submitFu:function(){
_.validateFu()
if(!_.form.has('.'+_.invalidCl).length)
$.ajax({
type: "POST",
url:_.mailHandlerURL,
data:{
name:$('.name input',_.form).val()||'nope',
email:$('.email input',_.form).val()||'nope',
phone:$('.phone input',_.form).val()||'nope',
subject:$('.subject input',_.form).val()||'nope',
days:$('.days input',_.form).val()||'nope',
fax:$('.fax input',_.form).val()||'nope',
state:$('.state input',_.form).val()||'nope',
message:$('.message textarea',_.form).val()||'nope',
owner_email:_.ownerEmail,
stripHTML:_.stripHTML
},
success: function(){
_.showFu()
}
})
},
showFu:function(){
_.success.slideDown(function(){
setTimeout(function(){
_.success.slideUp()
_.form.trigger('reset')
},_.successShow)
})
},
controlsFu:function(){
$(_.controls,_.form).each(function(){
var th=$(this)
th
.bind('click',function(){
_.form.trigger(th.data('type'))
return false
})
})
},
showErrorFu:function(label){
label.find('.'+_.errorCl).slideDown()
},
hideErrorFu:function(label){
label.find('.'+_.errorCl).slideUp()
},
showEmptyFu:function(label){
label.find('.'+_.emptyCl).slideDown()
_.hideErrorFu(label)
},
hideEmptyFu:function(label){
label.find('.'+_.emptyCl).slideUp()
},
init:function(){
_.form=this
_.labels=$('label',_.form)
_.preFu()
_.controlsFu()
_.form
.bind('submit',function(){
if(_.validate)
_.submitFu()
else
_.form[0].submit()
return false
})
.bind('reset',function(){
_.labels.removeClass(_.invalidCl)
_.labels.each(function(){
var th=$(this)
_.hideErrorFu(th)
_.hideEmptyFu(th)
})
})
_.form.trigger('reset')
}
}
if(!data)
(typeof opt=='object'?$.extend(_,opt):_).init.call(th),
th.data({cScroll:_}),
data=_
else
_=typeof opt=='object'?$.extend(data,opt):data
})
return this
}
})
})(jQuery)
$(function(){
$('#contact-form').forms({
ownerEmail:'admin@ututor.com.au'
})
})
QUESTION:
How to get the drop down menu to work in the php. I;m OK with the HTML but what is required in PHP and JS additon?
Thanks
B