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

Question

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

我在 HTML 中有一个表单，然后在 JS 中进行验证，最后在 PHP 中发送电子邮件。

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

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

这是代码(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 代码：

<?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" ...> 依此类推所有其他输入。 将您的选择器更改为适当的类名。

此外，从不 只需使用 即：$(".name");、$(".email"); 等作为您的选择器。如您所知，$(".name"); 将在您的文档中得到 every class="name"。所有其他选择器也是如此。相反，使用第二个参数 (ParentElement) 将 search 限制为仅提供的 parent[= 的子元素54=]:

var name = $(".name", this);

或者更确切地说，使用属性选择器，例如：

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

关于验证的重要说明：

从不信任客户端。
JS 验证应该尽量少用，只是作为一个 UX 工具来帮助，告知用户基本的 errors/typos。 真正的验证，以及所有相关的错误响应，应该在后端处理。
目前你的 PHP 似乎很容易受到 XSS 攻击。

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

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

Undefined data in the email of my contact form

javascript

php

html

forms

contacts