Question

首先，代码：

CONTACT_FORM.HTML

<html>
 <head>
  <title>Contact Form</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <link rel="stylesheet" href="contact_form.css" />
  <script src="contact_form.js"></script>
 </head>
 <body>
  <div id="mainform">
   <form id="form" name="form" action="contact_form.html">
    <h3>Contact Form</h3>
    <p id="returnmessage"></p>
    <label>Name: <span>*</span></label>
    <input type="text" id="name" placeholder="Name"/>
    <label>Email: <span>*</span></label>
    <input type="text" id="email" placeholder="Email"/>
    <label>Contact No: <span>*</span></label>
    <input type="text" id="contact" placeholder="10 digit Mobile no."/>
    <label>Message:</label>
    <textarea id="message" placeholder="Message......."></textarea>
    <input type="button" id="submit" value="Send Message"/>
   </form>
  </div>
 </body>
</html>

CONTACT_FORM.PHP

<?php
 $name = $_POST['name1'];
 $email = $_POST['email1'];
 $message = $_POST['message1'];
 $contact = $_POST['contact1'];
 $email = filter_var($email, FILTER_SANITIZE_EMAIL);
 if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
  if (!preg_match("/^[0-9]{10}$/", $contact)) {
   echo "<span>* Please Fill Valid Contact No. *</span>";
  } else {
   $subject = "Message from website...";
   $headers = 'MIME-Version: 1.0' . "\r\n";
   $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
   $headers .= 'From:' . $email. "\r\n";
   $headers .= 'Cc:' . $email. "\r\n";
   $template = '<div style="padding:50px; color:white;">Hello ' . $name . ',<br/>'
   . '<br/>Thank you for contacting us.<br/><br/>'
   . 'Name:  ' . $name . '<br/>'
   . 'Email:  ' . $email . '<br/>'
   . 'Contact No:  ' . $contact . '<br/>'
   . 'Message:  ' . $message . '<br/><br/>'
   . 'This is a contact confirmation email.'
   . '<br/>'
   . 'We will keep you posted with our goings on.</div>';
   $sendmessage = "<div style=\"background-color:#7E7E7E; color:white;\">" . $template . "</div>";
   $sendmessage = wordwrap($sendmessage, 70);
   mail("me@mydomain.com", $subject, $sendmessage, $headers);
   echo "Thank you, your query has been received.";
  }
 } else {
  echo "<span>* invalid email *</span>";
 }
?>

CONTACT_FORM.JS

$(document).ready(function() {
 $("#submit").click(function() {
  var name = $("#name").val();
  var email = $("#email").val();
  var message = $("#message").val();
  var contact = $("#contact").val();
  $("#returnmessage").empty();
  if (name == '' || email == '' || contact == '') {
   alert("Please Fill Required Fields");
  } else {
   $.post("contact_form.php", {
    name1: name,
    email1: email,
    message1: message,
    contact1: contact
   }, function(data) {
    $("#returnmessage").append(data);
    if (data == "Your Query has been received, We will contact you soon.") {
     // $("#form")[0].reset();
     $('#form').find('form')[0].reset();
    }
   });
  }
 });
});

我的问题是......

如何在提交后清除表格？
为什么回馈给发件人的CC不起作用？

提前致谢。

Answer 1

至于重置，你的代码试图在一个表单中查找另一个表单......不存在

更改

 $('#form').find('form')[0].reset();

要

 $('#form')[0].reset();

Answer 2

这是一种从头顶清除表格的方法：

在您的HTML中，添加

<input type="reset" style="display:none;" id="reset-button" />

然后，在你的JS：

if (data == "Your Query has been received, We will contact you soon.") {
 $('#reset-button').click();
}

关于CC部分，为什么不使用PHPMailer，它会减少您的工作量并且更容易发送给许多收件人。

Answer 3

您可以清除所有文本输入元素。

$( "#form input:text" ).attr({value: ""});

或者将每个字段重置为占位符值：

$( "#form input:text" ).each(function(){
    var placeholder_value = $(this).attr('placeholder');
    $(this).attr('value', placeholder_value});
});

Answer 4

感谢charlietfl指出IF逻辑的文本差异。现在一切都很好，花花公子。

根据charlietfl的建议，我在JS文件中更改了以下行：

旧代码：$（＆＃39;＃form＆＃39;）。find（＆＃39; form＆＃39;）[0] .reset（）;

新代码：$（＆＃39;＃form＆＃39;）[0] .reset（）;

另外，我修改了PHP和JS中的消息文本，因此IF语句将验证。

再次感谢！

如何在发送AJAX联系表单后清除字段？

4 个答案: