解决联系表单中未定义数据的问题-php教程-PHP中文网

解决联系表单中未定义数据的问题

聖光之護

发布： 2025-07-29 16:34:11

原创

214人浏览过

解决联系表单中未定义数据的问题

本教程旨在解决联系表单提交后，部分数据在邮件中显示为 "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>
  <input type="text" name="clinic" class="form-control clinic" placeholder="Clinic Name*">
</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 phone" 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 address" placeholder="Address*">
</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" 的元素。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

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';
  }
}
?>

登录后复制

请注意：