我有一个小问题。表单在jquery中返回false后不再提交
当表单提交并且表单返回false时,它不会再提交。
例如,如果用户错过了他们的名字,它将返回false并显示一条消息,声明输入他们的名字。
但是,用户无法刷新表单而无需刷新页面,这意味着所有数据都将丢失。
我该如何解决这个问题?
下面是HTML侧:
<form action="javascript:parseResponse();" method="post" name="ajaxcontactform" id="ajaxcontactform">
<div class="contacttextarea">
<input name="contactform" type="hidden" value="1" />
<fieldset>
<textarea name="comment" cols="5" rows="5" class="contacttextarea"onfocus="if (this.value == 'Please Leave A Message') {this.value = '';}">Please Leave A Message</textarea>
</fieldset>
</div>
<div class="contacttextboxes">
<fieldset>
<input id="name" name="name" type="text" class="contacttextform" onfocus="if (this.value == 'Please Insert Your Name') {this.value = '';}"value="Please Insert Your Name">
</fieldset>
<fieldset>
<input id="phone" name="phone" type="text" class="contacttextform" onfocus="if (this.value == 'Please Insert Your Phone Number') {this.value = '';}"value="Please Insert Your Phone Number">
</fieldset>
<fieldset>
<input id="email" name="email" type="text" class="contacttextform" onfocus="if (this.value == 'Please Insert Your Email') {this.value = '';}"value="Please Insert Your Email">
</fieldset>
<fieldset>
<input name="send" type="submit" class="contactformbutton" value="Send">
</fieldset>
</div>
</form>
这里是jquery的侧
$(document).ready(function() {
//// Start Contact Form ////
$('#ajaxcontactform').submit(function(){$('input[type=submit]', this).attr('disabled', 'disabled');});
$('#ajaxcontactform').submit(
function parseResponse() {
var usersname = $("#name");
var usersemail = $("#email");
var usersphonenumber = $("#phone");
var usersmessage = $("#comment");
var url = "contact.php";
var emailReg = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
var valid = emailReg.test(usersemail);
if(!valid) {
$("#contactwarning").html('<p>Your email is not valid!</p>').slideDown().delay(3000).slideUp();
return false;
}
if (usersname.val() == "" || usersname.val() == "Please Insert Your Name") {
$("#contactwarning").html('<p>Please Insert Your Name!</p>').slideDown().delay(3000).slideUp();
return false;
}
if (usersemail.val() == "" || usersemail.val() == "Please Insert Your Email") {
$("#contactwarning").html('<p>Please Insert Your Email!</p>').slideDown().delay(3000).slideUp();
return false;
}
if (usersphonenumber.val() == "" || usersphonenumber.val() == "Please Insert Your Phone Number") {
$("#contactwarning").html('<p>Please Insert Your Phone Number!</p>').slideDown().delay(3000).slideUp();
return false;
}
if (usersmessage.val() == "") {
$("#contactwarning").html('<p>You forgot to leave a message!</p>').slideDown().delay(3000).slideUp();
return false;
}
$.post(url,{ usersname: usersname.val(), usersemail: usersemail.val(), usersphonenumber: usersphonenumber.val(), usersmessage: usersmessage.val() } , function(data) {
$('#contactajax').html(data);
$("#ajaxcontactform").fadeOut(100).delay(12000).fadeIn(3000);
$('#contactajax').fadeIn(3000).delay(3000).fadeOut(3000);
});
}
);
//// End Contact Form ////
});
这里是PHP部分:
<?php
if(isset($_REQUEST['contactform']) && $_REQUEST['contactform'] == 1){
echo '<p>Success!</p>';
} else {
echo '<p>Form could not be sent, please try again!</p>';
}
所有从当错误工作开显示它不会重新提交。
请勿使用内联脚本和代码。并再次测试。 – gdoron 2012-03-27 13:31:57