Question

这里的表格新手，我试着整天想出这个，但似乎无法让它正常运作。

我有一个简单的联系表单设置。提交有效，但成功消息＆＃34;这应该显示，不是。

它显示了＆＃34;成功＆＃34;但实际上并没有添加我要添加的内容。

以下是表单的标记，包括脚本：

<script>

function _(id) {
    return document.getElementById(id);
}

function submitForm() {
    _("mybtn").disabled = true;
    _("status").innerHTML = 'Your message is being sent';
    var formdata = new FormData();
    formdata.append("n", _("n").value);
    formdata.append("e", _("e").value);
    formdata.append("m", _("m").value);
    var ajax = new XMLHttpRequest();
    ajax.open("POST", "email_form.php");
    ajax.onreadystatechange = function() {
        if (ajax.readyState == 4 && ajax.status == 200) {
            if (ajax.responseText == "success") {
                _("my_form").innerHTML = '<h2>Thanks ' + _("n").value + ', your message has been sent.</h2>';
            } else {
                _("status").innerHTML = ajax.responseText;
                _("mybtn").disabled = false;
            }
        }
    }
    ajax.send(formdata);
}
</script>
</head>
<body>

<div id="mc-form">

<form id="my_form" onsubmit="submitForm(); return false;">
<div class="form-group">
    <label class="control-label" for="inputNormal">Name</label>
    <input id="n" type="text" class="form-control" placeholder="Name" required />
</div>

<div class="form-group">
    <label class="control-label" for="inputNormal">Email</label>
    <input id="e" type="email" class="form-control" placeholder="Email" required/>
</div>

<div class="form-group">
    <label class="control-label" for="inputWarning">Message</label>
    <textarea id="m" rows="10" class="form-control" placeholder="Message" required></textarea>
</div>

<input id="mybtn" type="submit" value="Submit Form"> <span id="status"></span>
</form>

</div>

这是处理电子邮件的php：

<?php
if( isset($_POST['n']) && isset($_POST['e']) && isset($_POST['m']) ){
$n = $_POST['n'];
$e = $_POST['e'];
$m = nl2br($_POST['m']);
$to = "admin@martinconde.com";  
$from = $e;
$subject = 'Contact Form Message';
$message = '<b>Name:</b> '.$n.' <br><b>Email:</b> '.$e.' <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 "The server failed to send the message. Please try again later.";
}
}
?>

任何指针都会受到高度赞赏，因为我要把头发拉出来;）

提前致谢！

Answer 1

if (ajax.responseText == "success") {

您进行测试以查看答案是否为"success"。

   _("my_form").innerHTML = '<h2>Thanks ' + _("n").value + ', your message has been sent.</h2>';

如果是，那么你会看到这条消息。

由于您没有看到该消息，因此响应不能是"success"。

} else {
    _("status").innerHTML = ajax.responseText;

因此，此代码将运行，并且消息的内容将添加到页面中。

在那里你可以看到成功。

这意味着该字符串必须为" success"，"success "，"success\n"或类似字符。

即。还有一些额外的空格，你不能通过浏览渲染的HTML来看到它。

您需要：

更改您的测试，以便在或
修复PHP，使其不输出额外的空格

Answer 2

我已经复制了你的文件并且正在为我工作（检查你是否保存了文件）。在任何情况下，我都会检查来自服务器的响应代码，因为如果有意外输出，表单将失败。也许它的印刷成功\ n＆＃34;最后有新的一行，因此失败了。

// in email_form.php

// if successfull
http_response_code (200)
// if fails 500 or another error code.
http_response_code (500)

// In html

if (ajax.readyState == 4 && ajax.status == 200) {
  _("my_form").innerHTML = '<h2>Thanks ' + _("n").value + ', your...';
}
else {
   _("status").innerHTML = ajax.responseText;
   _("mybtn").disabled = false;
}

在AJAX成功之后使用.innerHTML显示内容

2 个答案: