我的联系表格电子邮件中的未定义数据

Question

我应该用联系表解决一个问题，但我不知道该把手放在哪里了。

我有一个 HTML 表单，然后是 JS 验证，最后是用 PHP 发送的电子邮件。

表格数据是：姓名、诊所、电子邮件、电话、地址和估价。

在我收到的电子邮件中，数据是：
姓名：在表格中输入的姓名
电子邮件：在表格中输入的电子邮件
诊所：未定义
电话：未定义
地址：未定义
估值：未定义

这是代码（HTML + JS）：

 // JavaScript Document $(document).ready(function() { "use strict"; $(".contact-form").submit(function(e) { e.preventDefault(); var name = $(".name"); var email = $(".email"); var clinic = $(".clinic"); var phone = $(".phone"); var address = $(".address"); var valutation = $(".valutation"); var subject = $(".subject"); var msg = $(".message"); var flag = false; if (name.val() == "") { name.closest(".form-control").addClass("error"); name.focus(); flag = false; return false; } else { name.closest(".form-control").removeClass("error").addClass("success"); } if (email.val() == "") { email.closest(".form-control").addClass("error"); email.focus(); flag = false; return false; } else { email.closest(".form-control").removeClass("error").addClass("success"); } var dataString = "name=" + name.val() + "&email=" + email.val() + "&subject=" + subject.val() + "&msg=" + msg.val() + "&clinic=" + clinic.val() + "&phone=" + phone.val() + "&address=" + address.val() + "&valutation=" + valutation.val(); $(".loading").fadeIn("slow").html("Loading..."); $.ajax({ type: "POST", data: dataString, url: "php/contactForm.php", cache: false, success: function (d) { $(".form-control").removeClass("success"); if(d == 'success') // Message Sent? Show the 'Thank You' message and hide the form $('.loading').fadeIn('slow').html('<font color="#48af4b">Mail sent Successfully.</font>').delay(3000).fadeOut('slow'); else $('.loading').fadeIn('slow').html('<font color="#ff5607">Mail not sent.</font>').delay(3000).fadeOut('slow'); } }); return false; }); $("#reset").on('click', function() { $(".form-control").removeClass("success").removeClass("error"); }); })

 <div class="row justify-content-center"> <div class="col-lg-10 col-xl-8"> <div class="form-holder"> <form class="row contact-form" method="POST" action="php/contactForm.php" id="contactForm"> <!-- Form Select --> <div class="col-md-12 input-subject"> <p class="p-lg">This question is about: </p> <span>How satisfied are you with the service that Lab offers? </span> <select class="form-select subject" aria-label="Default select example" name="valutation"> <option>Very unsatisfied</option> <option>Unsatisfied</option> <option>Satisfied</option> <option>Very satisfied</option> <option selected>I don't have an opinion</option> </select> </div> <!-- Contact Form Input --> <div class="col-md-12"> <p class="p-lg">Your Name: </p> <span>Please enter your Dentist Name: </span> <input type="text" name="name" class="form-control name" placeholder="Your Name*"> </div> <div class="col-md-12"> <p class="p-lg">Clinic Name: </p> <span>Please enter your Clinic Name: </span> <input type="text" name="clinic" class="form-control name" placeholder="Clinic Name*"> </div> <div class="col-md-12"> <p class="p-lg">Your Email Address: </p> <span>Please carefully check your email address for accuracy</span> <input type="text" name="email" class="form-control email" placeholder="Email Address*"> </div> <div class="col-md-12"> <p class="p-lg">Phone Number: </p> <span>Please enter your/clinic phone number: </span> <input type="text" name="phone" class="form-control name" placeholder="Phone Number*"> </div> <div class="col-md-12"> <p class="p-lg">Address: </p> <span>Please enter Clinic Address: </span> <input type="text" name="address" class="form-control name" placeholder="Address*"> </div> <!-- Contact Form Button --> <div class="col-md-12 mt-15 form-btn text-right"> <button type="submit" class="btn btn-skyblue tra-grey-hover submit">Submit Request</button> </div> <!-- Contact Form Message --> <div class="col-lg-12 contact-form-msg"> <span class="loading"></span> </div> </form> </div> </div> </div>

这是PHP代码：

<?
$name  = $_REQUEST["name"];
$email = $_REQUEST["email"];
$clinic = $_REQUEST["clinic"];
$phone = $_REQUEST["phone"];
$address = $_REQUEST["address"];
$valutation = $_REQUEST["valutation"];
$to    = "myemail@email.com"; 
if (isset($email) && isset($name)) {
    $email_subject = "Request to access to the Price List"; 
        $headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n";
$headers .= "From: ".$name." <".$email.">\r\n"."Reply-To: ".$email."\r\n" ;
$msg     = "From: $name<br/> Email: $email <br/> Clinic: $clinic <br/> Phone: $phone <br/> Address: $address <br/> Valutation: $valutation";
    
   $mail =  mail($to, $email_subject, $msg, $headers);
  if($mail)
    {
        echo 'success';
    }

else
    {
        echo 'failed';
    }
}

?>

Answer 1

你的问题是你的选择器。 您只需将班级name和email用于所有输入。

<input type="text" name="phone" class="form-control name" ...>
实际上应该是：
<input type="text" name="phone" class="form-control phone" ...>等所有其他输入。 将您的选择器更改为适当的 classNames。

另外，永远不要只使用ie: $(".name"); $(".email"); 等作为您的选择器。 如您所知$(".name"); 将在您的文档中获取每个class="name" 。 所有其他选择器也是如此。 相反，使用将推断特定父级的第二个参数（在您的情况下为 FORM）： $(".name", this);

相反，使用属性选择器，如：

var clinic = $(`[name="clinic"]`, this);

this （正如我已经说过的）是指父 FORMElement - 因为它在其.submit(函数中使用。

---

关于验证的重要说明：

永远不要相信客户。
JS 验证应该最少使用，就像一个 UX 工具来帮助，通知用户基本的错误/错别字。 真正的验证以及所有相关的错误响应应该在后端处理。
目前您的 PHP 似乎很容易受到 XSS 攻击。

您不需要 HTML <form>即可将数据发送到服务器。 攻击者只需找到您的路由/路径（通常通过表单的action属性公开），查看源中的名称并手动构建 HTTP 请求，并将危险的任意数据发送到您的服务器。 只是让你记住。