PHP表单损坏

时间:2019-03-17 09:49:16

标签: javascript php html

我在使用PHP电子邮件表单时遇到问题。它是从我设计的另一个网站(可以正常工作)复制并粘贴的-我做过的唯一不同的事情是稍微更改了文件结构以使其整理。

以前,所有主要的html页面都位于根目录中,而组件文件(JS,PHP,图像,字体等)都位于html目录中-例如$root/contact us.html,而组件位于{ {1}}。

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

我已经更新了PHP和JS文件,因此它们都指向正确的方向,但是该表格现在无法正常工作。

有人能发现我做错了吗?

这是代码...

HTML

$root/js/forms.js

JS

<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>

和PHP

"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
    ==============================================================*/ 

谢谢您的建议!

1 个答案:

答案 0 :(得分: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",