联系表单数据未定义怎么解决

有志者，事竟成！如果你在学习文章，那么本文《解决联系表单数据未定义的常见方法》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

本教程旨在解决联系表单提交后，部分数据在邮件中显示为 "undefined" 的问题。通过分析 HTML、JavaScript 和 PHP 代码，我们将找出问题根源，并提供详细的修改方案，确保表单数据能够正确传递和显示。此外，我们还将讨论前端验证的局限性以及后端数据验证的重要性，以提高表单的安全性。

问题分析

从问题描述来看，尽管用户在表单中填写了 Clinic、Phone、Address 和 Valutation 等字段，但在收到的邮件中，这些字段的值却显示为 "undefined"。 这表明数据在从前端传递到后端的过程中丢失了。 为了解决这个问题，我们需要逐一检查 HTML 结构、JavaScript 代码和 PHP 代码，找出导致数据丢失的原因。

解决方案

经过对代码的分析，发现问题主要出在 HTML 元素的 class 选择器上。 在 HTML 代码中，多个输入框都使用了相同的 class "name"，导致 JavaScript 代码在获取这些输入框的值时出现混乱。

1. 修改 HTML 元素的 Class 选择器

正确的做法是为每个输入框使用唯一的 class 名称，或者使用有意义的 class 名称来区分不同的输入框。 例如，可以将 phone 输入框的 class 修改为 "phone"，address 输入框的 class 修改为 "address"，依此类推。

修改后的 HTML 代码如下所示：

<div class="col-md-12">
  <p class="p-lg">Clinic Name: </p>
  <span>Please enter your Clinic Name: </span>
  &lt;input type=&quot;text&quot; name=&quot;clinic&quot; class=&quot;form-control clinic&quot; placeholder=&quot;Clinic Name*&quot;&gt;
</div>

<div class="col-md-12">
  <p class="p-lg">Phone Number: </p>
  <span>Please enter your/clinic phone number: </span>
  &lt;input type=&quot;text&quot; name=&quot;phone&quot; class=&quot;form-control phone&quot; placeholder=&quot;Phone Number*&quot;&gt;
</div>

<div class="col-md-12">
  <p class="p-lg">Address: </p>
  <span>Please enter Clinic Address: </span>
  &lt;input type=&quot;text&quot; name=&quot;address&quot; class=&quot;form-control address&quot; placeholder=&quot;Address*&quot;&gt;
</div>

2. 修改 JavaScript 代码

在 JavaScript 代码中，需要根据修改后的 class 名称来更新变量的赋值。

$(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");
  });

})

3. 考虑使用属性选择器

除了使用 class 选择器外，还可以使用属性选择器来获取输入框的值。 属性选择器可以根据 HTML 元素的属性值来选择元素。 例如，可以使用 [name="clinic"] 来选择 name 属性值为 "clinic" 的输入框。

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

4. JavaScript 选择器作用域

为了避免选择器选择到不期望的元素，可以限制选择器的作用域。 例如，可以使用 $(".name", this) 来选择当前表单中的 class 为 "name" 的元素。

5. PHP 代码检查

PHP 代码负责接收并处理从前端传递过来的数据。 检查 PHP 代码，确保正确接收和使用所有表单字段。 以下是示例 PHP 代码，用于接收和处理表单数据：

<?php
$name = $_POST["name"];
$email = $_POST["email"];
$clinic = $_POST["clinic"];
$phone = $_POST["phone"];
$address = $_POST["address"];
$valutation = $_POST["valutation"];
$to = "your_email@example.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';
  }
}
?>

请注意：

• 使用 $_POST 而不是 $_REQUEST，明确指定从 POST 请求中获取数据。
• 将 $to 变量替换为实际的收件人邮箱地址。

安全性注意事项

1. 后端数据验证

永远不要信任来自客户端的数据。 客户端验证仅仅是一种用户体验工具，用于帮助用户尽早发现错误。 真正的验证应该在后端进行。

2. 防止 XSS 攻击

PHP 代码需要进行安全处理，以防止 XSS 攻击。 可以使用 htmlspecialchars() 函数来转义特殊字符，防止恶意代码注入。

3. 避免直接使用 HTML