【发布时间】：2014-03-14 19:34:17
【问题描述】：
我有一个弹出式（灯箱样式）表单，如下所述。我正在使用 jquery/ajax 提交表单，这很好用。我收到成功响应并将消息应用到表单所在的 div。当我单击背景时，表单或成功消息正确关闭，但是当我单击按钮再次弹出表单时，我收到成功消息或空白弹出窗口（除非我刷新页面）。提交成功后如何“召回”表单？
表格：
<div id="contact_form" style="text-align:center">
<form id="form1" action="" class="formoid-default-skyblue" style="background-color:#FFFFFF;font-size:14px;font-family:'Open Sans','Helvetica Neue','Helvetica',Arial,Verdana,sans-serif;color:#666666;max-width:200px;min-width:150px" method="post"><div class="title"><h2>Contact</h2></div>
<div class="element-name" title="First and last name"><label class="title">Name:<span class="required">*</span></label><input class="large" type="text" name="name" id="name" placeholder="First and Last Name" required="required"/><br>
<label class="error" for="name" id="name_error">This field is required.</label></div>
<div class="element-email" title="Email Address"><label class="title">Email<span class="required">*</span></label><input class="large" type="email" name="email" id="email" placeholder="you@youremail.com" value="" required="required"/><br>
<label class="error" for="email" id="email_error">This field is required.</label>
<label class="error" for="email" id="valid_email_error">Valid Email is required.</label></div>
<div class="element-phone" title="Use xxx-xxx-xxxx format"><label class="title">Phone<span class="required">*</span></label><input class="large" type="text" name="phone" id="phone" placeholder="xxx-xxx-xxxx format" required="required"/><br>
<label class="error" for="phone" id="phone_error">This field is required.</label></div>
<div class="element-message" title="Enter your comments"><label class="title">Message:<span class="required">*</span></label><textarea class="small" name="message" id="message" placeholder="Enter your comments" cols="20" rows="5" >
<div class="submit"><input type="submit" id="submitButton" value="Submit"/></div></form>
</div>
并处理表单 jquery/ajax:
<script type="text/javascript" >
$(document).ready(function(){
$('.error').hide();
$('#submitButton').click(function() {
// validate and process form here
$('.error').hide();
var name = $("input#name").val();
if (name == "") {
$("label#name_error").show();
$("input#name").focus();
return false;
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}
var email = $("input#email").val();
if(IsEmail(email)==false){
$('#invalid_email').show();
$("label#valid_email_error").show();
$("input#email").focus();
return false;
}
var phone = $("input#phone").val();
if (phone == "") {
$("label#phone_error").show();
$("input#phone").focus();
return false;
}
$.ajax({
type: "POST",
url: "conprocTest.asp",
data: $("#form1").serialize(),
cache: false,
dataType: "html",
success: function(response){
$("#form1").hide();
$('#contact_form').html("<div id='divSuccessMsg' style='max-width:220px;margin: 0px auto;'><span style='font-weight:bold;'>Thank You, Your Message was Sent Successfully!</span><br><em>We make every effort to respond in a timely fashion but there are times when factors out of our <br>control impact our response (emails lost in transit etc.). If you have not heard from us within <br>48 hours please try again, we will never knowingly ignore your contact.</em></div>")
setTimeout(resetAll,3000);
},
error: function(response){
$('#contact_form').html("<p style='text-align:center'><strong>There was an error!</strong><br><em>Please contact us directly.</em></p>")
},
});
return false;
});
});
function IsEmail(email) {
var regex = /^([\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+\.)*[\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+@((((([a-z0-9]{1}[a-z0-9\-]{0,62}[a-z0-9]{1})|[a-z])\.)+[a-z]{2,6})|(\d{1,3}\.){3}\d{1,3}(\:\d{1,5})?)$/;
if(!regex.test(email)) {
return false;
}else{
return true;
}
}
function resetAll(){
$("#form1").show();
$('#divSuccessMsg').remove(); // Removing it as with next form submit you will be adding the div again in your code.
}
</script>
任何想法将不胜感激。谢谢。
【问题讨论】：