使用 AJAX、PHP 和 HTML5 制作的联系表无效

Question

我只是想为我的网站制作一个有效的联系表格，当有人想要完成设计工作时，它将把表格的信息发送到我的电子邮件。

我以前从来没有制作过可以发送电子邮件的联系表，但我发现这个教程看起来很简单。 http://www.developphp.com/video/JavaScript/Contact-Form-Web-Application-Tutorial-Ajax-HTML5-PHP

contact.html（Javascript代码）

<script>
        function _(id) { return document.getElementById(id); }
        function submitForm() {
            _("sBtn").disabled = true;
            _("satus").innerHTML = 'Please wait...';
            var formdata = new FormData();
            formdata.append("c", _("c").value );
            formdata.append("r", _("r").value );
            formdata.append("n", _("n").value );
            formdata.append("e", _("e").value );
            formdata.append("b", _("b").value );
            formdata.append("m", _("m").value );
            var ajax = new XMLHttpRequest();
            ajax.open( "POST", "example_parser.php");
            ajax.onreadystatechange = function() {
                if(ajax.readyState == 4 && ajax.status == 200) {
                    if(ajax.responseText == "sucess") {
                        _("formContain").innerHTML = '<h2>Thank you '+_("n").value+', our carrier pigeons are in route with your message!</h2>';
                    } else {
                        _("status").innerHTML = ajax.responseText;
                        _("sBtn").disabled = false;
                    }
                }
            }
            ajax.send( formdata );
        }
    </script>

contact.html（表格代码）

<form id="formContain" class="formContain" onsubmit="submitForm(); return false;">
                    <label class="formLabels" for="cName">COMPANY NAME</label>
                    <input class="formInputs" type="text" id="c" placeholder="Your company's name..." required>
                    <label class="formLabels" for="cRole">ROLE</label>
                    <input class="formInputs" type="text" id="r" placeholder="Your role in the company..." required>
                    <label class="formLabels" for="fName">FULL NAME</label>
                    <input class="formInputs" type="text" id="n" placeholder="Your full name..." required>
                    <label class="formLabels" for="cEmail">EMAIL</label>
                    <input class="formInputs" type="email" id="e" placeholder="company@companyname.com..." required>
                    <label class="formLabels" for="cBudget">BUDGET</label>
                    <input class="formInputs" type="text" id="b" placeholder="Your budget..." required>
                    <label class="formLabels" for="cMessage">MESSAGE</label>
                    <textarea class="formMessage" type="text" id="m" placeholder="Your message..." required></textarea>
                    <input class="submitBtn" type="submit" id="sBtn" value="submitForm"><span id="status"></span>
                </form>

example_parser.php

<?php
if( isset($_POST['c']) && isset($_POST['r']) && isset($_POST['n']) && isset($_POST['e']) && isset($_POST['b']) && isset($_POST['m']) ) {
    $c = $_POST['c'];
    $r = $_POST['r'];
    $n = $_POST['n'];
    $e = $_POST['e'];
    $b = $_POST['b'];
    $m = nl2br($_POST['m']);
    $to = "FracturedDesignsOfficial@gmail.com";
    $from = $e;
    $subject = 'New Client Dropped Us A Line!';
    $message = '<style>*{background-color:#1a1a1d;} b{color:#C3073F;} p{color:#8F83B5;}</style><b>Their Company Name:</b> '.c.' <br> <b>Their Role:</b> '.r.' <br> <b>Their Name:</b> '.n.' <br> <b>Their Email:</b> '.e.' <br> <b>Their Budget:</b> '.b.' <br> <p>'.m.'</p>';
    $headers = "From: $from\n";
    $headers .= "MIME-Version: 1.0\n";
    $headers .= "Content-type: text/html; charset=iso-8859-1\n";

    if( mail($to, $subject, $message, $headers) ){
        echo "success";
    } else {
        echo "Our carrier pigeons are on strike, we are hard at work taking care of their demands!";
    }
}
?>

我原以为单击发送消息后会输出 "Please wait..."，而 Javascript 和 PHP 会是运行。该页面似乎只是重新加载。我能看到的唯一变化是 http://fractureddesigns.space/contact.html being displayed in the address bar there is http://fractureddesigns.space/contact.html?

Answer 1

下一行有错字，导致错误：

_("satus").innerHTML = 'Please wait...';

改成下面的试试：

_("status").innerHTML = 'Please wait...';

使用 AJAX、PHP 和 HTML5 制作的联系表无效

Contact form not working, made using AJAX, PHP & HTML5

html

php

forms

ajax

contact-form