如何在验证后清除表单

How can I clear a form after validation?

本文关键字:清除 表单 验证      更新时间:2023-09-26

点击提交并验证后,我在清除表单时遇到问题。这个表单有三个部分: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清除内容,或者只需刷新页面。这样就可以了。
除非你遇到了特定的问题,否则重置表单不会带来任何麻烦

希望这能有所帮助。