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>

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 for good measure

<?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;
您应该在表单event.preventDefault事件的处理程序中调用submit方法或输入[type =“submit”] click事件。

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

3 个答案: