我对jQuery不太熟悉。我正在尝试制作一个无需重新加载页面即可在后台提交的表单。
我有一个隐藏的div,它显示并隐藏单击,在div内有一个表单。
我有两个问题:
1)表单验证失败时,仍将提交表单。我试图设置验证和提交代码的状态,if(validation == valid) { $.ajax.... }但无法正常工作。
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(); }); });
不应绑定到click事件(input[type=submit]),而应绑定到 submit 表单的事件。
input[type=submit]
submit
$("form").on("submit", function (e) { e.preventDefault();
我也不确定验证。如果它异步运行,则需要回调。如果它同步运行,什么时候触发?提交表单时似乎应该完成此操作,除非您的验证插件单独执行此操作:
$("form").on("submit", function (e) { e.preventDefault(); if ($(this).validate(options)) { $.ajax
使用e.preventDefault将防止重新加载,并应显示成功div。
e.preventDefault