jQuery-在提交时隐藏表单 [英] jQuery - Hide form on Submit
问题描述
我想在成功提交后隐藏表单:
I would like to hide my form on successful submission:
这里是测试空间的链接: http://www.bgv.co. za/testspace/contact_3.php
Here is a link to the testspace: http://www.bgv.co.za/testspace/contact_3.php
它是PHP jQuery杂种的组合.目前,我正在使用jQuery验证程序,并且添加了自定义脚本来更改包装div的输入字段上的类,以作为显示必填字段的一种方式.
Its a combination PHP jQuery mongrel. At the moment I'm using jQuery validator and I have added custom script to change the class on the input fields wrapping div - as a way to show required fields.
这就是我在PHP中拥有的
Here is what I have in the PHP
<?php
$ subject =网站联系表查询";
$subject = "Website Contact Form Enquiry";
//如果提交表单 if(isset($ _ POST ['submit'])){
//If the form is submitted if(isset($_POST['submit'])) {
//Check to make sure that the name field is not empty
if(trim($_POST['contactname']) == '') {
$hasError = true;
} else {
$name = trim($_POST['contactname']);
}
//Check to make sure sure that a valid email address is submitted
if(trim($_POST['email']) == '') {
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
$hasError = true;
} else {
$email = trim($_POST['email']);
}
//Check to make sure comments were entered
if(trim($_POST['message']) == '') {
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['message']));
} else {
$comments = trim($_POST['message']);
}
}
//If there is no error, send the email
if(!isset($hasError)) {
$emailTo = 'info@bgv.co.za'; //Put your own email address here
$body = "Name: $name \n\nEmail: $email \n\nComments:\n $comments";
$headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}
} ?>
这是脚本区域:
$(document).ready(function(){
$('#contactform').validate({
showErrors: function(errorMap, errorList) {
//restore the normal look
$('#contactform div._required').removeClass('_required').addClass('xrequired');
//stop if everything is ok
if (errorList.length == 0) return;
//Iterate over the errors
for(var i = 0;i < errorList.length; i++)
$(errorList[i].element).parent().removeClass('xrequired').addClass('_required');
}
}); });
因此,当某人提交有效表格时,您会在联系表格"下方看到一个新标题-从此处开始:
So at the moment when someone submits a valid form you see a new heading just under Contact form - its from here:
<?php if(isset($emailSent) && $emailSent == true) { //If email is sent ?>
<h1 class="success_form">Thank You!</h1>
<?php } ?>
在它下面是在表单中输入的数据.
and below it is the data entered into the form.
但是我想隐藏的下面的形式....请帮助:)
But its the form shoing below that I want to hide.... Please help :)
这是我感谢Flashbackzoo添加的新内容
Here is the new bit I added thanks to Flashbackzoo
$("#content").empty();
$("#content").append(
"<p>If you want to be kept in the loop...</p>" +
"<p>Or you can contact...</p>"
);
$('h1.success_').removeClass('success_').addClass('success_form');
$('#contactform').hide();
},
推荐答案
添加提交处理程序...
Add a submit handler...
$('#contactform').validate({
showErrors: function(errorMap, errorList) {
// your code...
},
submitHandler: function() {
$('#contactform').hide();
}
});
更新
为回应您的评论,布雷特.您可以将您的SubmitHandler更改为...
In response to your comment Brett. You could change your submitHandler to something like...
submitHandler: function() {
$("#content").empty();
$("#content").append(
"<p>If you want to be kept in the loop...</p>" +
"<p>Or you can contact...</p>"
);
}
这将使用.empty()方法从#content中删除所有子元素.然后使用.append()方法将元素添加到#content中.您可以将#content换成您喜欢的任何选择器.
This will remove all child elements from #content using the .empty() method. Then add elements to #content using the .append() method. You can swap out #content for any selector you like.
这篇关于jQuery-在提交时隐藏表单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!