联系人表单变量不会从部分标签传递到 javascript 中
Contact form variables are not passing into javascript from section tag
联系人表单变量不会传递到 JavaScript 中。 基本上JavaScript在验证时失败。在调试时,我"undefined is not a function."
此页面上有几个分隔符。如果我将相同的代码放在一个单独的页面中,例如"contact.html"
变量将传递到 javascript 中。
我的理解是HTML tag id="contact-form"
由于某种原因不会传递到函数中。
爪哇脚本
function code_contactvalidation() {
// Add form.special data (required for validation)
$('form.special input, form.special textarea').each(function() {
this.data = {};
this.data.self = $(this);
var val = this.data.self.val();
this.data.label = (val && val.length) ? val : null;
this.data.required = this.data.self.attr('aria-required') == 'true';
});
// Special form focus & blur
$('form.special input, form.special textarea').focus(function() {
with (this.data) {
console.log('focusing');
if ( label && self.val() == label) self.val('');
else return;
}
}).blur(function() {
with (this.data) {
if ( label && self.val().length == 0 ) self.val(label)
else return;
}
});
// initialize captcha
var randomcaptcha = function() {
var random_num1=Math.round((Math.random()*10));
var random_num2=Math.round((Math.random()*10));
document.getElementById('num1').innerHTML=random_num1;
document.getElementById('num2').innerHTML=random_num2;
var n3 = parseInt(random_num1) * parseInt(random_num2);
$('#captcharesult').attr('value', n3);
$('#buttonsubmit').attr('value','Submit');
};
randomcaptcha();
//initialize vars for contact form
var sending = false,
sent_message = false;
$('#contact-form').each(function() {
var _this = this;
this.data = {};
this.data.self = $(this);
this.data.fields = {};
this.data.labels = {};
this.data.notification = this.data.self.find('.notification');
_.each(['name','email','subject'], function(name) {
_this.data.fields[name] = _this.data.self.find(_.sprintf('input[name=%s]', name));
_this.data.labels[name] = _this.data.fields[name].val();
});
}).validate({
errorPlacement: function() {},
highlight: function(element) { $(element).addClass('invalid'); },
unhighlight: function(element) { $(element).removeClass('invalid'); },
submitHandler: function(form) {
if (sending) return false;
if ( sent_message ) { alert('Your message has been sent, Thanks!'); return false; }
var field, valid = true;
with (form.data) {
_.each(fields, function(field, name) {
if ( $.trim(field.val()) == labels[name] ) { valid = false; field.addClass('invalid'); } else { field.removeClass('invalid'); }
});
}
if (valid) {
sending = true;
$('#ajax-loader').show();
form.data.self.ajaxSubmit({
error: function(errorres) {
$('#ajax-loader').hide();
randomcaptcha();
form.data.notification.removeClass('sucess').addClass('error').find('span:first-child').html('Unable to send message (Unknown server error)');
form.data.notification.animate({opacity: 100}).fadeIn(500);
},
success: function(res) {
sending = false;
$('#ajax-loader').hide();
if (res == 'success') {
sent_message = true;
form.data.notification.removeClass('error').addClass('success').find('span:first-child').html('Your message has been sent!');
form.data.notification.animate({opacity: 100}).fadeIn(500);
$('#formName').val("");
$('#formEmail').val("");
$('#formSubject').val("");
$('#formMessage').val("");
$('#formcheck').val("");
} else if (res == 'captchaerror') {
randomcaptcha();
form.data.notification.removeClass('sucess').addClass('error').find('span:first-child').html('Captcha Error');
form.data.notification.animate({opacity: 100}).fadeIn(500);
} else {
randomcaptcha();
form.data.notification.removeClass('sucess').addClass('error').find('span:first-child').html('Unable to send message (Unknown server error)');
form.data.notification.animate({opacity: 100}).fadeIn(500);
}
}
});
}
return false;
}
});
}
.HTML
<section id="contact">
<div class="container">
<div class="row text-center">
<div id="principal" data-align="left">
<div class="form_group_contact">
<script type="text/javascript" src="js/jquery.validate.pack.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<form class="contactForm special validate" id="contact-form" action="sendmsg.php" method="post">
<p><input id="formName" name="name" type="text" value="Name" class="required" /></p>
<p><input id="formEmail" name="email" type="text" value="Email" class="required email" /></p>
<p><input id="formSubject" name="subject" class="last required" type="text" value="Subject" /></p>
<p><textarea id="formMessage" name="message" class="required margin20" rows="4" cols="83"></textarea></p>
<div class="form_captcha margin20">
<p>Captcha Recognition (<span id="num1"></span> * <span id="num2"></span>) =
<input type="hidden" id="captcharesult" name="captcha_result" value=""/>
<input type="text" class="required number" maxlength="3" size="3" id="formcheck" name="captcha" value=""/>
</p>
</div>
<p class="notification" style="display: none;"><span></span> <span class="close" data-action="dismiss"></span></p>
<p><input type="submit" value="" class="margin20" id="buttonsubmit" /><img id="ajax-loader" alt="" src="./images/ajax-loader.gif" /></p>
</form>
</div>
</div>
</div>
</div>
</section>
if ( label && self.val().length == 0 ) self.val(label)
需要有一个分列(;)结束那行;)另外,您在联系表格上称"每个",这让我认为您期望不止一个联系表格。您需要在 HTML 中将标识符设置为"class"而不是"id",并在 jQuery 选择器中使用 "." 而不是 "#"。
现在你已经解决了这些小问题,请在Firefox中尝试一下。谷歌对javascript错误非常模糊,Firefox会给你一个更好的错误消息。请与我们分享,以便我可以使用最终解决方案编辑这篇文章。
相关文章:
- 将 OnClick 事件附加到我的标签 - JavaScript.亚德夫.
- innerHTML 在 img 标签 javascript 之后
- Instagram API - 使用自定义标签javascript阅读图片
- 我如何替换像twitter或facebook这样的keydown事件上的hash标签.javascript//jquer
- 当我们点击链接标签javascript中的跨度时,要防止链接的行为
- 自动;点击“;每X秒一个锚标签?Javascript
- 在html中附加文本<脚本></脚本>标签Javascript问题
- 使用Google JSAPI破坏了我的内场标签javascript,为什么以及如何修复它
- 如何更改 标签 javascript 的文本值
- 标签中的标签- JavaScript错误-不能设置属性className为null
- 获取Twitter引导's "标签"Javascript在Rails应用程序上工作
- 完整的HTML标签javascript
- 在 Python 程序中包装画布标签 + javascript 的最简单方法
- 将每个单词的第一个字母包装在span标签- javascript中
- 不能从选择标签JavaScript中检索选项的值
- 将输入文本字段更改为标签,并在标签javascript中添加输入类型值
- 获取特定HTML标签JavaScript的内容
- 解析标签javascript的html属性
- 如何用这一行打开一个新标签(JavaScript?)
- 在span标签javascript中包装数字