Question

我在点击提交和验证后无法清除表单。这种形式有三个部分。 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;
?>

Answer 1

你应该这样做：

$("#formR" )[0].reset(); //<--forgot the # because that's the form's ID

您可能不需要[0]中的$("#formR" )[0].reset();

将该行放在return语句之前 - 你现在已经拥有它了。

这假设你有一些jquery插件暴露了一个“重置”函数 - 我之前没有在核心jquery库中看到过这个。

Answer 2

验证并提交表单后，如果要将值重置为默认值（它们最初具有的值），您只需手动将php变量设置为这些默认值即可。因此，如果值最初为空，请将变量设置为“”并再次将它们附加到表单。
如果您使用AJAX提交表单，您也可以使用JavaScript清除内容，或者只需刷新页面即可。那会照顾它。
除非您遇到问题，否则重置表单不应该造成任何麻烦。

希望这会有所帮助。

如何在验证后清除表单？

2 个答案: