如何在验证后清除表单
How can I clear a form after validation?
点击提交并验证后,我在清除表单时遇到问题。这个表单有三个部分:HTML、JS和PHP。表单正确提交并验证,但之后不会清除字段。我已经尝试了多种方法来清除它,但我运气不好。
<form id="formR" name="formR">
<input type="hidden" name="q" id="q" value="formR">
<input type="hidden" name="zip" id="zip" value="12345">
<p>
<label>
<input name="Name" type="text" placeholder="Name" id="name" onBlur="if(this.value=='') { this.value='Your Name' }" onFocus="if(this.value=='Your Name') { this.value='' }" value="Your Name">
</label><br>
<label>
<input name="email" type="text" placeholder="E-mail" id="email" onBlur="if(this.value=='') { this.value='E-mail' }" onFocus="if(this.value=='E-mail') { this.value='' }" value="E-mail">
</label><br>
<label>
<input name="phone" type="text" placeholder="Phone Number" id="phone" maxlength="10" onBlur="if(this.value=='') { this.value='Phone Number' }" onFocus="if(this.value=='Phone Number') { this.value='' }" value="Phone Number">
</label><br>
</p>
<input name="quote" id="quote" type="hidden" value="Recreational" />
<input name="Submit" type="button" value="Submit" onClick="validateForm()">
</form>
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
function updateZip ()
{
document.getElementById('zip').value = document.getElementById('zipcode').value;
}
function validateForm()
{
if(document.getElementById('name').value.length > 0 && document.getElementById('email').value.length > 0 && document.getElementById('phone').value.length > 0 && document.getElementById('name').value != 'Name' && document.getElementById('email').value != 'E-mail' && document.getElementById('phone').value != 'Phone Number')
{
if((document.getElementById('email').value.indexOf('@') != -1) && (document.getElementById('email').value.indexOf('.') != -1))
{
subForm();
return true;
}
else
{
alert('Please enter a valid email address!');
return false;
}
}
else
{
alert('Please enter all your information in first!');
return false;
}
}
function subForm()
{
//var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone; //alert (dataString);return false;
$.ajax({
type: "POST",
url: "sendEmail2.php",
data: $("#formR").serialize(),
success: function(msg) {
showNotification({
message: msg,
type: "success",
autoClose: true,
duration: 10
})
}
});
return false;
$( "formR" )[ 0 ].reset();
}
此外,还有一个php代码关联,所以我不确定这是否是表单未清除的原因。也许我把它放错地方了?
<?php
//Email sender...
//Config
`$emailTo = 'preintel@gmail.com';
$ip = $_SERVER['REMOTE_ADDR'];
if($_POST['q'] == 'formR')
{
//verify ip address:
$validateIP = true;
try{
$cont = file_get_contents("logs/formR.txt");
$lines = explode("'n",$cont);
foreach($lines as $s)
{
if(strpos($s,$ip) !== false)
$validateIP = false;
}
if($validateIP == false)
echo "A request has already been made with IP address: ".$ip.". Please wait until we contact you!";
}
catch(Exception $e)
{
echo "An error occurred, please make sure your ip address is not masked!";
}
$name = $_POST['Name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$quote = $_POST['quote'];
$headers = "From: " . strip_tags($_POST['email']) . "'r'n";
$headers .= "Reply-To: ". strip_tags($_POST['email']) . "'r'n";
//$headers .= "CC: susan@example.com'r'n";
$headers .= "MIME-Version: 1.0'r'n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1'r'n";
$subject = "New Quote Request From: ".$name;
$message = "<h3>A quote has been requested:</h3><hr/>Name: ".$name."<br/>Email: ".$email."<br/>Phone Number: ".$phone."<br/>Quote: ".$quote."<br/><br/><br/>Request Time: ".date("Y-m-d H:i:s")."<br/>Requesting IP: ".$ip;
if($validateIP)
{
if(mail($emailTo, $subject, $message, $headers))
{
echo "Thank you, your quote will be processed! We will contact you shortly.";
//Write ip to log file...
$file = 'logs/formR.txt';
$current = file_get_contents($file);
$current .= $ip." - ".date("d/m/y : H:i:s", time())."'n";
file_put_contents($file, $current);
}
else
echo "An error occurred sending your email, please try again later!";
}
}
else
echo "Oops! An error occurred... Please email us at: ".$emailTo;
?>
您应该执行以下操作:
$("#formR" )[0].reset(); //<--forgot the # because that's the form's ID
您可能不需要$("#formR" )[0].reset();
中的[0]
并将该行放在return语句之前-您现在将其放在后面。
这是假设您有某种jquery插件,它公开了一个"重置"函数——我以前在核心jquery库中从未见过这种情况。
验证并提交表单后,如果您想将值重置为默认值(它们最初的值),只需手动将php变量设置为这些默认值即可。因此,如果值最初为空,请将变量设置为",然后将它们再次附加到表单中
如果您使用AJAX提交表单,您也可以使用JavaScript清除内容,或者只需刷新页面。这样就可以了。
除非你遇到了特定的问题,否则重置表单不会带来任何麻烦
希望这能有所帮助。
相关文章:
- 如何在使用AngularJS更改下拉值时清除表单中的数据
- 在Chrome中重新加载页面后清除表单输入值
- Angularjs:提交后清除表单无效
- 我无法使用 .reset() 清除表单
- 我无法从引导模式中清除表单数据
- 如何在我的create.js.erb中重置/清除表单
- 如何使用javascript删除项目和清除表单
- 当没有表单名称时,如何在AngularJS中清除表单
- 如何不清除表单jQuery中禁用的输入
- 使用 jQuery 重置/清除表单
- 提交 angularjs 后清除表单
- 在 cakephp 1.3 中提交后清除表单
- MVC 3 剃刀无法使用验证类清除表单值
- JavaScript -- 提交值后清除表单
- 如何编辑我的 js,以便在输出输出之前清除表单
- 提交后清除表单中的文本字段
- Chrome扩展-点击清除表单文本
- 提交时未清除表单
- 如何在验证后清除表单
- 单击运行清除表单的JS函数的按钮后,视图无法恢复