我对
JQuery不太熟悉.我正在尝试制作一个在后台提交的表单而不重新加载页面.
我有一个隐藏的div显示和隐藏点击,div内有一个表单.
我有两个问题：
1)当表单验证失败时,表单仍然会被提交.我尝试将验证和提交代码置于条件if(validation == valid){$.ajax ….}但它无法正常工作.
2)表单提交后,div自动隐藏,因此无法看到成功的消息.
这是代码：
$().ready(function() {
// validate the form when it is submitted,using validation plugin.
var validator = $("#contactform").validate({
errorContainer: container,errorLabelContainer: $(),onkeyup: false,onclick: false,onfocusout: false,errorPlacement: function (error,element) {
error.insertBefore(element);
}
});
});
$(function() {
//this submits a form
$('input[type=submit]').click(function() {
$.ajax({
type: "POST",url: "contact.PHP",data: $("#contactform").serialize(),beforeSend: function() {
$('#result').html('<img src="loading.gif" />');
},success: function(data) {
$('#result').html(data);
}
})
})
})
//this shows and hides div onclick
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slidetoggle();
});
});
解决方法
您应该绑定到表单的submit事件,而不是绑定到click事件(input [type = submit]).
$("form").on("submit",function (e) {
e.preventDefault();
我也不确定验证.如果它以异步方式运行,则需要回调.如果它同步运行,它何时被触发？似乎应该在提交表单时完成,除非您的验证插件单独执行此操作：
$("form").on("submit",function (e) {
e.preventDefault();
if ($(this).validate(options)) {
$.ajax
使用e.preventDefault将阻止重新加载,并应允许您的成功div显示.