Form help
Moderator: General Moderators
Form help
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
- social_experiment
- DevNet Master
- Posts: 2793
- Joined: Sun Feb 15, 2009 11:08 am
- Location: .za
Re: Form help
In php you can access the value of the selected dropdown value as you do the other values in the form; $_POST['days']; this is already in the code though; what happens when you submit the form?
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
Re: Form help
When I submit the form I get:
Visitor: Bernie
Email Address: bernsterxxxx@hotmail.com
Phone Number: 0412xxxxxx
Subject of study: English
Preferred day:
Message: Test of day as Wednesday and subject as English
------------------------------------ >
There is no value for returned for the day selected
Visitor: Bernie
Email Address: bernsterxxxx@hotmail.com
Phone Number: 0412xxxxxx
Subject of study: English
Preferred day:
Message: Test of day as Wednesday and subject as English
------------------------------------ >
There is no value for returned for the day selected
- Tiancris
- Forum Commoner
- Posts: 39
- Joined: Sun Jan 08, 2012 9:54 pm
- Location: Mar del Plata, Argentina
Re: Form help
$days = $POST['days']; 
- social_experiment
- DevNet Master
- Posts: 2793
- Joined: Sun Feb 15, 2009 11:08 am
- Location: .za
Re: Form help
You meanTiancris wrote:$days = $POST['days'];
Code: Select all
$days = $_POST['days'];Code: Select all
<?php
print_r($_POST);
?>“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
Re: Form help
What I've done is to change the option1 to the actual day name (Monday, Tuesday...)
I've also corrected an error in the PHP from $days = $POST['days']; to $days = $_POST['days']; (THANKS)
The code CURRENTLY still fails to provide the day selected.
I'm only new to PHP > so even (<?php
print_r($_POST);
?>) >
I would need to know where to place it. Someone else has suggested that I add (<?PHP echo $_POST['SELECT_NAME']; ?> ) > but again > I have no idea where to place it.
The only other option is that I change the select to a text field where ppl can add their day manually. I was just really keen to know how select can work with PHP
Bernie
I've also corrected an error in the PHP from $days = $POST['days']; to $days = $_POST['days']; (THANKS)
The code CURRENTLY still fails to provide the day selected.
I'm only new to PHP > so even (<?php
print_r($_POST);
?>) >
I would need to know where to place it. Someone else has suggested that I add (<?PHP echo $_POST['SELECT_NAME']; ?> ) > but again > I have no idea where to place it.
The only other option is that I change the select to a text field where ppl can add their day manually. I was just really keen to know how select can work with PHP
Bernie
- social_experiment
- DevNet Master
- Posts: 2793
- Joined: Sun Feb 15, 2009 11:08 am
- Location: .za
Re: Form help
You can put that snippet of code anywhere on the page that processes the form; it's purpose is to see which values are present in the $_POST array once the form is submitted; I tested the default form code you posted and it returned only $_POST['days'];
The value of any $_POST field can be accessed by $_POST['fieldName'] where fieldName is the value inside the "name" attribute on your HTML form. Select elements aren't different from a textfield in terms of retrieving the informationBernster wrote:I was just really keen to know how select can work with PHP
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
Re: Form help
Thanks guys.. but its doing my head in. I think I need someone just to add the content code so I can just paste it.
Over my head as far as PHP understanding.
Thanks anyway.
B
Over my head as far as PHP understanding.
Thanks anyway.
B