javascript - PHP 表单损坏

Question

我在使用 PHP 电子邮件表单时遇到问题。它是从我设计的另一个网站(运行良好)复制和粘贴的 - 我唯一不同的是稍微更改了文件结构以进行整理。

以前，所有主要的 html 页面都位于根目录中，组件文件(JS、PHP、图像、字体等)位于 html 目录中 - 例如 $root/contact us.html ，以及 $root/html/js/forms.js 中的组件。

这次我刚刚删除了 html 目录，所以所有文件和文件夹都位于根目录中 - 例如 - $root/contact us.html, $root/js/forms.js.

我已经更新了 PHP 和 JS 文件，使它们都指向正确的方向，但现在表单无法正常工作。

谁能指出我做错了什么？

这是代码...

HTML

<form id="project-contact-form" action="javascript:void(0)" method="post">
  <div class="row">
    <div class="col-12">
      <div id="success-project-contact-form" class="vb-blue">Awesome - your message was sent! We'll be in touch soon.</div>
    </div>

    <div class="col-md-6">
      <input type="text" name="name" id="name" placeholder="Name *" class="big-input">
    </div>

    <div class="col-md-6">
      <input type="text" name="phone" id="phone" placeholder="Phone" class="big-input">
    </div>

    <div class="col-md-6">
      <input type="text" name="email" id="email" placeholder="E-mail *" class="big-input">
    </div>

    <div class="col-md-6">
      <div class="select-style big-select">
        <select name="subject" id="subject" class="big-input">
          <option value="">What's your message about?</option>
          <option value="general">- a general enquiry</option>
          <option value="product">- product related</option>
          <option value="delivery">- about a delivery</option>
          <option value="complaint">- a complaint</option>
          <option value="b2b">- a business proposal</option>
        </select>
      </div>
    </div>

    <div class="col-md-12">
      <textarea name="comment" id="comment" placeholder="Your message" rows="6" class="big-textarea"></textarea>
    </div>

    <div class="col-md-12 text-center">
      <button id="project-contact-us-button  margin-bottom-35" type="submit" class="btn btn-medium btn-rounded white bg-vb-red sbold-txt">SEND MESSAGE</button>
    </div>
  </div>
</form>

JS

"use strict";
    /*==============================================================
    form to email
    ==============================================================*/
    $("#success-project-contact-form").hide();
    //Project Contact us form
    $('#project-contact-us-button').on("click", function () {
        var error = ValidationProjectContactForm();
        if (error) {
            $.ajax({
                type: "POST",
                url: "php/project-contact-form.php",
                data: $("#project-contact-form").serialize(),
                success: function (result) {
                    // Un-comment below code to redirect user to thank you page.
                    //window.location.href="thank-you.html";

                    $('input[type=text],textarea').each(function () {
                        $(this).val('');
                    })
                    $("#success-project-contact-form").html(result);
                    $("#success-project-contact-form").fadeIn("slow");
                    $('#success-project-contact-form').delay(4000).fadeOut("slow");
                }
            });
        }
    });
    function ValidationProjectContactForm() {
        var error = true;
        $('#project-contact-form input[type=text]').each(function (index) {
            if (index == 0) {
                if ($(this).val() == null || $(this).val() == "") {
                    $("#project-contact-form").find("input:eq(" + index + ")").addClass("required-error");
                    error = false;
                } else {
                    $("#project-contact-form").find("input:eq(" + index + ")").removeClass("required-error");
                }
            } else if (index == 2) {
                if (!(/(.+)@(.+){2,}\.(.+){2,}/.test($(this).val()))) {
                    $("#project-contact-form").find("input:eq(" + index + ")").addClass("required-error");
                    error = false;
                } else {
                    $("#project-contact-form").find("input:eq(" + index + ")").removeClass("required-error");
                }
            }

        });
        return error;
    }

    /*==============================================================
    End form to email
    ==============================================================*/ 

和 PHP

<?php
  if(isset($_POST['email'])) {
    $name =$_POST["name"];  
    $from =$_POST["email"]; 
    $phone=$_POST["phone"]; 
    $comment=$_POST["comment"]; 
    $subject=$_POST["subject"];

// Email Receiver Address
    $receiver="info@1230.co";
    $subject="Website Contact Form";
    $message = "
    <html>
    <head>
    <title>Website Contact Form</title>
    </head>
    <body>
    <table width='50%' border='0' align='center' cellpadding='0' cellspacing='0'>
    <tr>
    <td colspan='2' align='center' valign='top'><img style=' margin-top: 15px; ' src='img/logo-forms.png' ></td>
    </tr>
    <tr>
    <td width='50%' align='right'>&nbsp;</td>
    <td align='left'>&nbsp;</td>
    </tr>
    <tr>
    <td align='right' valign='top' style='border-top:1px solid #dfdfdf; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#000; padding:7px 5px 7px 0;'>Name:</td>
    <td align='left' valign='top' style='border-top:1px solid #dfdfdf; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#000; padding:7px 0 7px 5px;'>".$name."</td>
    </tr>
    <tr>
    <td align='right' valign='top' style='border-top:1px solid #dfdfdf; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#000; padding:7px 5px 7px 0;'>Email:</td>
    <td align='left' valign='top' style='border-top:1px solid #dfdfdf; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#000; padding:7px 0 7px 5px;'>".$from."</td>
    </tr>
    <tr>
    <td align='right' valign='top' style='border-top:1px solid #dfdfdf; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#000; padding:7px 5px 7px 0;'>Phone:</td>
    <td align='left' valign='top' style='border-top:1px solid #dfdfdf; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#000; padding:7px 0 7px 5px;'>".$phone."</td>
    </tr>
    <tr>
    <td align='right' valign='top' style='border-top:1px solid #dfdfdf; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#000; padding:7px 5px 7px 0;'>Subject:</td>
    <td align='left' valign='top' style='border-top:1px solid #dfdfdf; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#000; padding:7px 0 7px 5px;'>".$subject."</td>
    </tr>
    <tr>
    <td align='right' valign='top' style='border-top:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#000; padding:7px 5px 7px 0;'>Message:</td>
    <td align='left' valign='top' style='border-top:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#000; padding:7px 0 7px 5px;'>".nl2br($comment)."</td>
    </tr>
    </table>
    </body>
    </html>
    ";
// Always set content-type when sending HTML email
    $headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";

// More headers
$headers .= 'From: <'.$from.'>' . "\r\n";
   if(mail($receiver,$subject,$message,$headers))  
   {

//Success Message
      echo "The message has been sent!";
   }
    else
   {

//Fail Message
      echo "The message could not been sent!";
   }
}
?>

感谢您的任何建议!

Answer 1

刚刚测试了您的代码，错误出在您的 html 代码中，您有 id="project-contact-us-button margin-bottom-35"，如下面的代码所示。

<button id="project-contact-us-button  margin-bottom-35" type="submit" class="btn btn-medium btn-rounded white bg-vb-red sbold-txt">SEND MESSAGE</button>

然后您将点击事件处理程序分配给 project-contact-us-button

//Project Contact us form
    $('#project-contact-us-button').on("click", function () {

要使您的代码正常工作，请移除 margin-bottom-35。 ID 不得包含此处指定的空格(空格、制表符等)www.w3schools.com/html/html_id.asp ，我不知道那是不是打字错误，但这就是破坏代码的原因

<button id="project-contact-us-button" type="submit" class="btn btn-medium btn-rounded white bg-vb-red sbold-txt">SEND MESSAGE</button>

如果引用顶级目录，也使用 ../

 url: "../php/project-contact-form.php",