Ich versuche, ein Formular zu erstellen, das ohne Seitenaktualisierung gesendet wird. Ich kann jQuery nicht verwenden, um dies zu erreichen. Ich kann anscheinend nirgendwo eine Lösung finden, die es NICHT erwähnt, also möchte ich nur wissen, was ich mit dem, was ich bisher habe, falsch mache und wie ich es beheben kann.

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 für ein gutes Maß

<?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!"; 
}
2
Nick D 5 Dez. 2013 im 03:17

3 Antworten

Beste Antwort

Verstanden!!!!

Ich habe keine Werte angegeben, die vom Formular gesendet werden sollen. Ich habe es behoben, indem ich meine start () - Funktion so aussehen ließ:

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

Ich hatte zuvor versucht, die Werte einer Validierungsfunktion zu verwenden, aber es gab ein damit verbundenes Umfangsproblem. Das funktioniert!!! Ich bin ein echter Programmierer!

2
Nick D 5 Dez. 2013 im 00:59

Der einfachste Weg, dies zu tun, besteht darin, einen Iframe in Ihrem Dokument zu haben und ihn mit CSS auszublenden. Geben Sie dem Iframe einen Namen und legen Sie dann ein Zielattribut in Ihrem Formular fest, das auf Ihren versteckten Iframe verweist.

Dadurch wird das Formular im versteckten Iframe veröffentlicht und die gesamte Seite wird nicht neu geladen.

Es ist nicht einmal Javascript erforderlich.

Wenn Sie das Ergebnis des Beitrags verarbeiten müssen, verwenden Sie einfach das Onload-Ereignis auf dem Iframe, um die Ausgabe der PHP-Seite zu erkennen und zu verarbeiten, die sich jetzt im Iframe befindet.

0
HaukurHaf 4 Dez. 2013 im 23:23

Es gibt zwei Möglichkeiten, dies zu beheben:

  • Der Ausdruck im Formularattribut onsubmit sollte false zurückgeben.

  • Sie sollten die Methode event.preventDefault im Handler des Ereignisses submit aufrufen oder das Ereignis [type = "submit"] click eingeben.

0
Paul 4 Dez. 2013 im 23:58