为使用JS邮件处理程序的电子邮件获取Select中Option的值
Getting value of Option in Select for an Email that uses a JS Mail handler
我知道我以前发过这个,但我在累的时候和凌晨2点发了另一个。这一个我可以很快回复,我想整理一下,我会在发布后立即删除另一个。
好吧,所以标题可能有点混乱,但只要读一下这个,看看它是否更有意义。
我下载了一个HTML5网站模板,它附带了一个用于表单操作的联系人php表单
这是表单的HTML:
<form id="contact-form" action="bat/MailHandler.php">
<div class="success">
Contact form submitted! <strong>We have received your email and will be with you within 24 hours.</strong>
</div>
<fieldset>
<div>
<label class="topic">
<select style="width:370px;" name="topic">
<option value="General">General</option>
<option value="Development">Development</option>
<option value="Graphics">Graphics Design</option>
<option value="Video">Video Editing</option>
</select>
</label>
</div>
<div>
<label class="name">
<input type="text" value="Your name">
<br>
<span class="error">*This is not a valid name.</span><span class="empty">*This field is required.</span></label>
</div>
<div>
<label class="phone">
<input type="tel" value="Telephone (Please include country code)">
<br>
<span class="error">*This is not a valid phone number.</span><span class="empty">*This field is required.</span></label>
</div>
<div>
<label class="email">
<input type="email" value="Email">
<br>
<span class="error">*This is not a valid email address.</span><span class="empty">*This field is required.</span></label>
</div>
<div>
<label class="message">
<textarea>Message</textarea>
<br>
<span class="error">*The message is too short.</span><span class="empty">*This field is required.</span></label>
</div>
<div class="buttons-wrapper">
<a class="btn btn-1" data-type="reset">Clear</a><a class="btn btn-1" data-type="submit">Send</a>
</div>
</fieldset>
</form>
MailHandler.php如下所示:
<?php
// Database connect
$db_host = 'localhost';
$db_user = 'redjaxco';
$db_pass = 'CORRECT PASSWORD';
$db_database = 'redjaxco_website';
$link = mysql_connect($db_host,$db_user,$db_pass) or die('Unable to establish a DB connection');
mysql_select_db($db_database,$link);
mysql_query("SET names UTF8");
$owner_email = "contact@red-jax.com";
$headers = 'From:' . $_POST["email"];
$subject = 'Online Form: '. $_POST["name"];
$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";
}else{
$headers = '';
}
if($_POST['phone']!='nope'){
$messageBody .= '<p>Phone Number: ' . $_POST['phone'] . '</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
{
// ignore the SQL thing... It doesn't yet work
$sql = mysql_query("INSERT INTO customers (
name,email,telephone
) VALUES (
'{$_POST['name']}',
'{$_POST['email']}',
'{$_POST['telephone']}',
)");
if (!$sql)
{
throw new Exception('mail failed');
}
echo 'mail sent';
}
}catch(Exception $e){
echo $e->getMessage() ."'n";
}
?>
MailHandler由一个名为"forms.js"的javascript文件驱动。
Forms.js:
//forms
;(function($){
$.fn.forms=function(o){
return this.each(function(){
var th=$(this)
,_=th.data('forms')||{
errorCl:'error',
emptyCl:'empty',
invalidCl:'invalid',
notRequiredCl:'notRequired',
successCl:'success',
successShow:'4000',
mailHandlerURL:'bat/MailHandler.php',
ownerEmail:'support@template-help.com',
stripHTML:true,
smtpMailServer:'localhost',
targets:'input,textarea,select',
controls:'a[data-type=reset],a[data-type=submit]',
validate:true,
rx:{
".topic":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:select' },
".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'},
".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(){
_.validateFu(label)
if(_.isEmpty(label))
inp.val(defVal)
,_.hideErrorFu(label.removeClass(_.invalidCl))
})
.bind('keyup',function(){
label.hasClass(_.invalidCl)
&&_.validateFu(label)
})
label.find('.'+_.errorCl+',.'+_.emptyCl).css({display:'block'}).hide()
})
_.success=$('.'+_.successCl,_.form).hide()
},
isRequired:function(el){
return !el.hasClass(_.notRequiredCl)
},
isValid:function(el){
var ret=true
$.each(_.rx,function(k,d){
if(el.is(k))
ret=d.rx.test(el.find(d.target).val())
})
return ret
},
isEmpty:function(el){
var tmp
return (tmp=el.find(_.targets).val())==''||tmp==el.data('defVal')
},
validateFu:function(el){
el.each(function(){
var th=$(this)
,req=_.isRequired(th)
,empty=_.isEmpty(th)
,valid=_.isValid(th)
if(empty&&req)
_.showEmptyFu(th.addClass(_.invalidCl))
else
_.hideEmptyFu(th.removeClass(_.invalidCl))
if(!empty)
if(valid)
_.hideErrorFu(th.removeClass(_.invalidCl))
else
_.showErrorFu(th.addClass(_.invalidCl))
})
},
getValFromLabel:function(label){
var val=$('input,textarea',label).val()
,defVal=label.data('defVal')
return label.length?val==defVal?'nope':val:'nope'
}
,submitFu:function(){
_.validateFu(_.labels)
if(!_.form.has('.'+_.invalidCl).length)
$.ajax({
type: "POST",
url:_.mailHandlerURL,
data:{
topic:_.getValFromLabel($('.topic',_.form)),
name:_.getValFromLabel($('.name',_.form)),
email:_.getValFromLabel($('.email',_.form)),
phone:_.getValFromLabel($('.phone',_.form)),
fax:_.getValFromLabel($('.fax',_.form)),
state:_.getValFromLabel($('.state',_.form)),
message:_.getValFromLabel($('.message',_.form)),
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=_.me
_.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')
}
}
_.me||_.init(_.me=th.data({forms:_}))
typeof o=='object'
&&$.extend(_,o)
})
}
})(jQuery)
$(window).load(function(){
$('#contact-form').forms({
ownerEmail:'#'
})
})
我的问题是,我想在表单顶部添加select,这将更改邮件的主题,以便将它们排序到我的电子邮件帐户上的特定邮箱中。
我试着添加到forms.js中,但没有效果,也许我做错了。除了HTML表单和MailHandler之外,所有的代码都和我下载模板时一样。虽然MailHandler在我添加select之前就已经工作了,从那以后我再也没有更改过它。
我不太擅长JavaScript。HTML和PHP我很熟悉,但JavaScript我是新手。我不知道这是不是JavaScript问题,我猜这就是所有功能的所在。
感谢您的帮助,不要害怕询问更多信息。
if($_POST['topic']!='nope'){
$messageBody .= '<p>topic: ' . $_POST["topic"] . '</p>' . "'n";
$messageBody .= '<br>' . "'n";
}
将以上内容添加到您的代码中。然后它将获取选择数据。
我自己用一个简单的JS修复程序解决了这个问题。
在HTML表单中,我添加了以下内容:
<label class="topic">
<input type="text" id="topicInput" class="hidden" /><br>
<span class="error">*This is not an option</span>
<span class="empty">*This field is required.</span>
</label>
在CSS中,我添加了以下内容:
.hidden {
display:none;
width:0px;
height:0px;
}
对于forms.js,我将提交函数从以下更改为:
submitFu:function(){
_.validateFu(_.labels)
if(!_.form.has('.'+_.invalidCl).length)
$.ajax({
type: "POST",
url:_.mailHandlerURL,
data:{
topic:_.getValFromLabel($('.topic',_.form)),
name:_.getValFromLabel($('.name',_.form)),
email:_.getValFromLabel($('.email',_.form)),
phone:_.getValFromLabel($('.phone',_.form)),
fax:_.getValFromLabel($('.fax',_.form)),
state:_.getValFromLabel($('.state',_.form)),
message:_.getValFromLabel($('.message',_.form)),
owner_email:_.ownerEmail,
stripHTML:_.stripHTML
},
success: function(){
_.showFu()
}
})
}
到此
submitFu:function(){
/* START ADDED */
var selOption = document.getElementById('topic');
var selVal = selOption.options[selOption.selectedIndex].value;
document.getElementById('topicInput').value = selVal;
/* END ADDED */
_.validateFu(_.labels)
if(!_.form.has('.'+_.invalidCl).length)
$.ajax({
type: "POST",
url:_.mailHandlerURL,
data:{
topic:_.getValFromLabel($('.topic',_.form)),
name:_.getValFromLabel($('.name',_.form)),
email:_.getValFromLabel($('.email',_.form)),
phone:_.getValFromLabel($('.phone',_.form)),
fax:_.getValFromLabel($('.fax',_.form)),
state:_.getValFromLabel($('.state',_.form)),
message:_.getValFromLabel($('.message',_.form)),
owner_email:_.ownerEmail,
stripHTML:_.stripHTML
},
success: function(){
_.showFu()
}
})
}
相关文章:
- 获取电子邮件附件的表单元素
- 如何使用LinkedIn Javascript API获取电子邮件地址字段
- 使用 LinkedIn API JavaScript SDK 获取电子邮件地址
- 如何获取电子邮件页面并向其提交表单数据
- 从数据库中获取电子邮件值并发送(PHP电子邮件)/刷新页面,而无需更改网站链接
- 如何使用正则表达式从此字符串获取电子邮件
- 无法使用PHP和Angular.js在电子邮件收件箱中获取电子邮件
- 如何解析 DOM 以获取电子邮件 Javascript
- 从字符串中获取电子邮件
- 如何获取电子邮件地址的Google+个人资料图片
- 通过Facebook Javascript SDK获取电子邮件
- Windows live api获取电子邮件联系人与电子邮件哈希
- Chrome扩展从页面获取电子邮件
- 如何在Outlook应用程序中获取电子邮件标题
- Javascript:获取电子邮件地址'@和点之间的文本
- 如何使用ajax从IMAP服务器获取电子邮件
- 我如何从mac的邮件应用程序中获取电子邮件[文件]?
- 我在试着做FB.登录只获取电子邮件,姓名和位置-但Facebook API总是要求用户提供“朋友列表”;访问权限
- 使用javascript从给定字符串获取电子邮件id
- 使用Facebook Firebase简单登录获取电子邮件