不刷新页面提交电子邮件表单，无需JQUERY。

Question

我正在尝试创建一个无需页面刷新即可提交的表单，但不能使用jQuery实现。我似乎找不到任何不涉及jQuery的解决方案，因此我想知道我目前的做法有什么问题，以及如何修复它。

HTML

<form id="contactForm" name="contactForm" method="post" onsubmit="return validate(this);">
<fieldset>
<ol>
<li><label for="email">Email Address</label><input class="text" id="email" name="email" size="30" type="text"></li>
<li><label for="firstName">First Name</label><input class="text" id="firstName" name="firstName" size="30" type="text"></li>
<li><label for="lastName">Last Name</label><input class="text" id="lastName" name="lastName" size="30" type="text"></li>
<li><label for="message">Message</label><textarea cols="40"  id="message" name="message" rows="20"></textarea></li>
</ol>
<input class="button" id="contactSubmit" name="submit" type="submit" value="submit">
</fieldset>
</form>

Ajax/JS

function observeEvent(target, eventName, observerFunction, useCapture){
    if (target.addEventListener) {
        target.addEventListener(eventName, observerFunction, useCapture);
    } else if (target.attachEvent) {
        target.attachEvent("on" + eventName, observerFunction);
    }
}


function start() {
    var xmlhttp = new XMLHttpRequest();
    var contentDiv = document.getElementById("success");

    xmlhttp.open("POST", "processor.php", true);
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            contentDiv.innerHTML=xmlhttp.responseText;
            alert('message sent!');
        }
    }
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
    xmlhttp.send("email=" + email +"&firstName=" + firstName + "&lastName=" + lastName + "&message=" + message);
}

observeEvent(window,"load",function() {
    var btn=document.getElementById("contactSubmit");
    observeEvent(btn,"click",start);
});

PHP为佳

<?php

$fName = $_POST['firstName'];
$lName = $_POST['lastName'];
$email = $_POST['email'];
$message = $_POST['message'];

$to = '[e-mail]';
$subject = 'the subject';
$message = 'FROM: ' . $fName . ' ' . $lName . ' Email: ' . $email . 'Message: '. $message;
$headers = 'From: ' . $to . "\r\n";

$mailRegex = '/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/';

if (preg_match($mailRegex, $email)) { // this line checks that we have a valid email address
mail($to, $subject, $message, $headers);
echo "Your email was sent!"; 
}

- Nick D

---

您的电子邮件验证将无法通过许多有效的电子邮件地址。 - user557846

Answer 1

明白了！！！

我没有给表单发送任何值。我通过使我的start()函数如下来修复它：

function start() {
    var xmlhttp = new XMLHttpRequest();
    var contentDiv = document.getElementById("success");

    var email = document.getElementById('email').value;
    var fName = document.getElementById('firstName').value;
    var lName = document.getElementById('lastName').value;
    var mes = document.getElementById('message').value;

    xmlhttp.open("POST", "processor.php", true);
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            contentDiv.innerHTML=xmlhttp.responseText;
            alert('message sent!');
        }
    }
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
    xmlhttp.send('email=' + encodeURIComponent(email) + '&firstName=' + encodeURIComponent(fName) + '&lastName=' + encodeURIComponent(lName) + '&message=' + encodeURIComponent(mes));

    return false;
}

之前我尝试使用验证函数的值，但与此相关的作用域问题导致失败。现在这个方法可行了！我是一个真正的程序员（有点儿）！

- Nick D

Answer 2

最简单的方法是在您的文档中添加一个iframe，并使用CSS将其隐藏。给iframe命名，然后在表单上设置目标属性，该属性引用您的隐藏iframe。

这将导致表单在隐藏的iframe内发布，整个页面不会重新加载。

甚至不需要使用JavaScript。

如果您需要处理发布结果，请使用iframe的onload事件来检测和处理php页面的输出，该输出现在位于iframe中。

- HaukurHaf

---

很酷，但是它实际上需要使用JavaScript。 - Nick D

Answer 3

有两种方法可以解决它：

• 表达式在onsubmit属性中应该返回false；

• 您应该在表单submit事件或input[type="submit"] click事件的处理程序中调用event.preventDefault方法。

- Paul

---

在表单元素上尝试使用 onsubmit="validate(this);return false;"。 - Paul

您可以在clickEvent处理程序中调用event.preventDefault()来禁用提交按钮的默认行为。 - Paul