提交電子郵件表單而無需刷新頁面NO JQUERY

Question

我正在嘗試制作無需刷新頁面即可提交的表單。 我無法使用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>

阿賈克斯/ 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 = 'xxx@xxx.com';
$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!"; 
}

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

我曾嘗試過使用驗證函數中的值，但是存在與此相關的范圍問題。 這有效！！！ 我是一個真正的程序員（有點）！

Answer 2

最簡單的方法是在文檔中添加一個iframe並使用CSS隱藏它。 給iframe命名，然后在表單上設置一個目標屬性，該屬性引用隱藏的iframe。

這將導致表單在隱藏的iframe中發布，並且整個頁面都不會重新加載。

甚至不需要javascript。

如果您需要處理發布的結果，只需在iframe上使用onload事件即可檢測並處理php頁面的輸出，該頁面現在位於iframe中。

Answer 3

有兩種解決方法：

• 形式為onsubmit屬性的表達式應返回false ;

• 您應該在表單submit事件或輸入[type =“ submit”] click事件的處理程序中調用event.preventDefault方法。