所以我们在网页页脚有这个联系人表单,它不起作用,表单验证和jquery事件没有与表单本身连接。
页面上的javascript应该为提交按钮附加一个事件,但看起来这不起作用。
这是jQuery:
jQuery(document).ready(function () {
jQuery('#form_contact_form_widget_001').validationEngine('init');
jQuery('#form_contact_form_widget_001 a#contact_form_widget_001_wformsend').click(function () {
var form_builder_url = jQuery('#contact_form_widget_001_wurl').val();
jQuery('#form_contact_form_widget_001 .loading').animate( {
opacity : 1
} , 250);
if (jQuery('#form_contact_form_widget_001').validationEngine('validate')) {
jQuery.post(form_builder_url, {
field_003 : jQuery('#field_003').val(),
field_004 : jQuery('#field_004').val(),
formname : 'contact_form_widget_001',
formtype : 'widget'
}, function () {
jQuery('#form_contact_form_widget_001 .loading').animate( { opacity : 0 }, 250);
document.getElementById('form_contact_form_widget_001').reset();
jQuery('#form_contact_form_widget_001').parent().find('.widgetinfo').hide();
jQuery('#form_contact_form_widget_001').parent().find('.widgetinfo').fadeIn('fast');
jQuery('html, body').animate( { scrollTop : (jQuery('#form_contact_form_widget_001').offset().top - 100) }, 'slow');
jQuery('#form_contact_form_widget_001').parent().find('.widgetinfo').delay(5000).fadeOut(1000);
} );
return false;
} else {
jQuery('#form_contact_form_widget_001 .loading').animate( { opacity : 0 }, 250);
return false;
}
} );
} );
知道为什么这不能正常工作吗?
http://medicure-html.cmsmasters.net/这个模板页有一个相同表单的工作版本
查看html源代码,您的表单有如下内容:
除了"#"之外没有定义任何动作,至少应该有一个页面url或函数在里面
你想使用jQuery的内置的submit
事件为您的表单。
为了覆盖默认的表单行为,你应该传递一个事件对象e
到这个事件,并调用e.preventDefault()
。这将阻止你的表单跳到屏幕顶部而无法执行你的操作。
jQuery('#form_contact_form_widget_001').submit(function (e) {
e.preventDefault();
// rest of the code
});