獲取表單以重置

Question

我設計了一個聯繫表單，除了一件事外，它工作得很好。只要有人沒有填寫字段，或者輸入的電子郵件地址無效，就會停止發送表單，但如果您嘗試再次輸入信息並點擊發送，它什麼也不做。如何在不清除輸入的信息的情況下再次發送表單？

形式可瀏覽：

http://sundayfundayleague.com/contact

沒有人有任何想法，我怎麼能做到這一點？

形式：

<form action="" method="post" id="mycontactform" > 
    <input type="text" class="inputbar" name="name" placeholder="Full Name" required> 
    <input type="email" class="inputbaremail" name="email" placeholder="Email" required> 
    <textarea rows="4" cols="50" name="message" class="inputbarmessage" placeholder="Message" required></textarea> 
    <label for="contactButton"> 
     <input type="button" class="contactButton" value="Send Message" id="submit"> 
    </label> 
</form> 

的Jquery：

$(document).ready(function(){ 

       $('#submit').click(function(){ 

        $.post("contactSend.php", $("#mycontactform").serialize(), function(response) { 
         if (response == 'Your email was sent!') { 
          $('#contactMessageStatus').append(response); 
          $('#contactMessageStatus').addClass("contactSuccess"); 
          $('html, body').animate({ 
           scrollTop: $("#contactMessageStatus").offset().top 
          }, 2000); 
          $('#contactMessageStatus').html(response); 
          $('#contactMessageStatus').delay(5500).fadeOut(400); 
         } 
         else { 
          $('#contactMessageStatus').append(response); 
          $('#contactMessageStatus').addClass("contactFail"); 
          $('html, body').animate({ 
           scrollTop: $("#contactMessageStatus").offset().top 
          }, 2000); 
          $('#contactMessageStatus').html(response); 
          $('#contactMessageStatus').delay(5500).fadeOut(400); 
         } 
        }); 
        return false; 
       }); 
      }); 

PHP腳本的形式發送：

$name = $_POST['name']; 
$email = $_POST['email']; 
$message = $_POST['message']; 

$to = 'contact@sundayfundayleague.com'; 
$subject = 'SFL Contact Form Submitted'; 
$message = 'FROM: '.$name. "<br>" . ' Email: '.$email. "<br>" . 'Message: '.$message; 
$headers = 'From: contact@sundayfundayleague.com' . "\r\n"; 

if (!empty($email)) { 
    if (filter_var($email, FILTER_VALIDATE_EMAIL)) { 

     //Should also do a check on the mail function 
     if (mail($to, $subject, $message, $headers)) { 
      echo "Your email was sent!"; // success message 
     } else { 
      echo "Mail could not be sent!"; // failed message 
     } 

    } else { 
     //Invalid email 
     echo "Invalid Email, please provide a valid email address."; 
    } 

} else { 
    echo "Email Address was not filled out."; 
} 

UPDATE： 你的意思是這樣的，加上消息面？

if (!empty($email)) { 
    if (filter_var($email, FILTER_VALIDATE_EMAIL)) { 

    //Should also do a check on the mail function 
    if (mail($to, $subject, $message, $headers)) { 
     echo "Your email was sent!"; // success message 
    } else { 
     echo "Mail could not be sent!"; // failed message 
    } 
    if($name!== ''){ /*success*/ 
    } else { echo "Please enter a name"; 
    } 

} else { 
    //Invalid email 
    echo "Invalid Email, please provide a valid email address."; 
} 

Answer 1

您需要再次使狀態可見，因爲它已被前面的錯誤淡出。

嘗試

$(document).ready(function(){ 

    $('#submit').click(function(){ 
     $.post("contactSend.php", $("#mycontactform").serialize(), function(response) { 
      if (response == 'Your email was sent!') { 
       $('#contactMessageStatus').addClass("contactSuccess"); 
       $('html, body').animate({ 
        scrollTop: $("#contactMessageStatus").offset().top 
       }, 2000); 
       $('#contactMessageStatus').html(response); 
       $('#contactMessageStatus').show(); 
       $('#contactMessageStatus').delay(5500).fadeOut(400, function(){ $(this).removeClass("contactSuccess"); }); 
       $('#mycontactform').trigger('reset'); 
      } 
      else { 
       $('#contactMessageStatus').addClass("contactFail"); 
       $('html, body').animate({ 
        scrollTop: $("#contactMessageStatus").offset().top 
       }, 2000); 
       $('#contactMessageStatus').html(response); 
       $('#contactMessageStatus').show(); 
       $('#contactMessageStatus').delay(5500).fadeOut(400, function(){ $(this).removeClass("contactFail"); }); 
      } 
     }); 
     return false; 
    }); 
}); 

至於額外的錯誤信息：如果您在一審時正確填寫

if (!empty($email) && filter_var($email, FILTER_VALIDATE_EMAIL)) { 
    if($name!== ''){ 
      //Should also do a check on the mail function 
      if (mail($to, $subject, $message, $headers)) { 
       echo "Your email was sent!"; // success message 
      } else { 
       echo "Mail could not be sent!"; // failed message 
      } 
    } else { 
      echo "Please enter a name"; 
    } 
} else { 
    //Invalid email 
    echo "Invalid Email, please provide a valid email address."; 
}