现在我一直试图让这个JS邮件处理程序与单选按钮一起工作,但没有运气.
我有没有单选按钮的表单,但是一旦我添加它就停止响应我相信这是JS方面的问题,因为我是JS的新手.
通过单击发送时停止响应没有任何反应. JS仍然对所有其他字段进行验证,但不会将表单发送到电子邮件.
希望这是有道理的,因为它迟到会明确地阅读这个明天的事情.
无论如何这里是我正在使用的代码任何帮助非常感谢.
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']?$/,".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,".phone":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,".fax":{rx:/^\+?(\d[\d\-\+\(\) ]{5,".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',email:_.getValFromLabel($('.email',phone:_.getValFromLabel($('.phone',fax:_.getValFromLabel($('.fax',state:_.getValFromLabel($('.state',message:_.getValFromLabel($('.message',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:'#'
})
MailHandler.php
<?php
$owner_email = $_POST["owner_email"];
$headers = 'From:' . $_POST["email"];
$subject = 'A message from your site visitor ' . $_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";
}
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['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";
}
?>
形成
form id="contact-form" action="/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="part">
<p>A</p><input type="radio" name="part" id="part" value="a">
<p>B</p><input type="radio" name="part" id="part" value="b">
</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>
解决方法
看起来您正在使用的插件未设置为处理无线电输入.
虽然它不太难修改.
您需要更改插件的3个部分.您还需要将.error和.empty元素添加到.part标签中
首先添加这个….
<label class="part">
<p>A</p><input type="radio" name="part" id="part" value="a">
<p>B</p><input type="radio" name="part" id="part" value="b">
<br/>
<span class="error">* Error occurred</span><span class="empty">*This field is required.</span>
</label>
添加后,您可以看到表单没有发送,因为它认为有错误(它认为无线电是空的).
这将导致我调查插件中的isEmpty()函数.
我修改了插件的这一部分,看起来像这样……
isEmpty:function(el){
var targets = el.find(_.targets);
if(targets.length > 1 && targets.is("input[type='radio']")){
var checked = targets.filter(":checked");
if(checked.length){
return false;
}else{
return true;
}
}else{
var tmp
return (tmp=el.find(_.targets).val())==''||tmp==el.data('defVal')
}
}
该插件现在检查标签内是否有多个输入,以及这些输入是否为无线电.如果是,则检查其中一个无线电是否已经：检查过.如果有,则不应将其视为空并返回true,从而停止错误消息.
需要进行的第二个修改是将带有类.part的标签添加到通过ajax发送到服务器的数据中.这可以在submitFu()函数中找到.我把它修改如下……
submitFu:function(){
_.validateFu(_.labels)
if(!_.form.has('.'+_.invalidCl).length)
$.ajax({
type: "POST",data:{
topic:_.getValFromLabel($('.topic',part:_.getValFromLabel($('.part',success: function(){
_.showFu()
}
})
}
这是你需要添加的…
part:_.getValFromLabel($('.part',
现在数据将被发送到服务器.但是……它没有被发送.那么我们必须查看函数getValFromLabel()来了解原因.
这再次没有设置处理单选按钮.所以稍作修改……
getValFromLabel:function(label){
var target = $('input,label);
if(target.length > 1 && target.is("input[type='radio']")){
var val = target.filter(":checked").val() || nope;
return val;
}else{
var val=$('input,defVal=label.data('defVal')
return label.length?val==defVal?'nope':val:'nope'
}
}
我们再次检查标签中的输入是否是无线电,如果是,则返回：checked一个的值.
成功.
您现在可以填写表单并点击提交,并将收音机中的数据发布到服务器.
- 上一篇：javascript – 除了Chrome之外,Ang下一篇：javascript – 使用document.getEl
猜你在找的JavaScript相关文章
- · JavaScript的事件及异常捕获01-14
- · 面试题 js重写原生函数（以push为例）01-10
- · 关于toLocaleString(), toString(), valueOf()方法的使用01-10
- · JS继承的6种方式(非ES6)01-10
- · 如何实现 Promise 池01-10
- · Number() 与 parseInt()解析01-10
- · 你知道 react-color 的实现原理吗01-10
- · Window.Open参数、返回值01-01
- · 前端进阶之认识与手写compose方法12-30
- · JS的Truthy和Falsy（真值与假值）12-28
- · [代码笔记]JS保持函数单一职责，灵活组合12-28
- · JS之AMD、CMD、CommonJS、ES6、UMD的使用笔记12-28
