时间戳

首页 > 解决方案 > 我的联系表格的电子邮件中未定义的数据

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

问题描述

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

我有一个 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代码：

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

标签： javascriptphphtmlformscontacts

解决方案

你的问题是你的选择器。您只使用类 name和email所有输入。

<input type="text" name="phone" class="form-control name" ...>
实际上应该是：
<input type="text" name="phone" class="form-control phone" ...> 对于所有其他输入，依此类推。将您的选择器更改为适当的类名。

此外，永远不要 只使用ie:$(".name");等 $(".email");作为您的选择器。如您所知，您的文档$(".name");中将包含所有内容。 class="name"所有其他选择器也是如此。相反，使用第二个参数（ParentElement）将搜索限制在所提供的parent的子元素中：

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

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

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

关于验证的重要说明：

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

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

推荐阅读