[英]Submitting Contact Form with AJAX
I have a contact form, which I want to submit with AJAX, because I want the echo Messages from the PHP file to show directly under my contact form. 我有一个联系表,我想用AJAX提交,因为我希望PHP文件中的echo消息直接显示在我的联系表下。
Thats what i got: 那就是我得到的:
form.php form.php
<form id="ContactForm" action="contact.php" method="POST" enctype="text">
<table class="contact-form">
<tr>
<td>Name<font color="#d25911">*</font></td>
<td>
<input type="text" id="betreff" name="betreff" placeholder="Betreff" size="45"/>
<input type="text" id="name" name="name" placeholder="Max Mustermann" size="45"/>
</td>
</tr>
<tr>
<td>E-Mail<font color="#d25911">*</font></td>
<td><input type="text" id="email" name="email" placeholder="max@mustermann.de" value="" size="45"/></td>
</tr>
<tr>
<td>Telefon:</td>
<td><input type="text" id="telefon" name="telefon" placeholder="Optional" size="45"/></td>
</tr>
<tr>
<td>Nachricht<font color="#d25911">*</font></td>
<td>
<textarea id="nachricht2" name="nachricht2" placeholder="Ihre Nachricht"></textarea>
<textarea id="nachricht1" name="nachricht1" placeholder="Ihre Nachricht"></textarea>
</td>
</tr>
<tr>
<td> </td>
<td>
<center>
<input type="submit" value="Senden" id="submit" name ="submit">
<!--<input type="reset" value="Leeren" id="reset" name ="reset">-->
</center>
</td>
</tr>
<tr>
<td><div id="result"></div></td>
</tr>
</table>
</form>
The script, that is placed inside form.php 脚本,位于form.php内
/* attach a submit handler to the form */
$("#ContactForm").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $(this),
a_betreff = $form.find('input[name="betreff"]').val(),
a_name = $form.find('input[name="name"]').val(),
a_email = $form.find('input[name="email"]').val(),
a_telefon = $form.find('input[name="telefon"]').val(),
a_nachricht2 = $form.find('textarea[name="nachricht2"]').val(),
a_nachricht1 = $form.find('textarea[name="nachricht1"]').val(),
url = $form.attr('action');
/* Send the data using post */
var posting = $.post(url, {
betreff: a_betreff,
name: a_name,
email: a_email,
telefon: a_telefon,
nachricht2: a_nachricht2,
nachricht1: a_nachricht1,
});
/* Put the results in a div */
posting.done(function(data) {
var content = $(data).find('#content');
$("#result").empty().append(content);
});
});
And this is my contact.php 这是我的contact.php
<?
// Assure that only via contact-form executable
if(!isset($_POST["submit"])){
exit;
}
// Returns true, if E-Mail is valid
function isValidEmail($email){
return filter_var($email, FILTER_VALIDATE_EMAIL) !== false;
}
// Initialize Variables
$name = addslashes(htmlspecialchars($_POST["name"]));
$email = addslashes(htmlspecialchars($_POST["email"]));
$telefon = addslashes(htmlspecialchars($_POST["telefon"]));
$telefon = strtolower($telefon);
$nachricht2 = addslashes(htmlspecialchars($_POST["nachricht2"]));
$betreff = addslashes(htmlspecialchars($_POST["betreff"]));
$nachricht1 = addslashes(htmlspecialchars($_POST["nachricht1"]));
// Check if chatbot filled this input fields
if(($betreff != "") OR ($nachricht1 != "")){
exit;
}
// Check if all required fields are field
if($name == ""){
echo "Bitte Namen eingeben.";
exit;
}
if($email == ""){
echo "Bitte E-Mail eingeben.";
exit;
}
if($nachricht2 == ""){
echo "Bitte Nachricht eingeben.";
exit;
}
$number = "/[0123456789]/";
if(preg_match($number, $name)) {
echo "Der angegebene Name ist ungültig.";
exit;
}
$digit = "/[a-z]/";
if(preg_match($digit, $telefon)) {
echo "Die angegebene Telefonnummer ist ungültig.";
exit;
}
if(!isValidEmail($email)){
echo "Die angegebene E-Mail Adresse ist ungültig.";
exit;
}
$message = "Guten Tag,\n\n";
$message .= "das Kontaktformular wurde am ".date("d.m.Y")." um ".date("H:i:s")." von:\n\nName: ".$name."\n";
$message .= "E-Mail: ".$email."\n";
if($telefon != ""){
$message .= "Telefon: ".$telefon."\n";
}
$message .= "\nverwendet.\n\n";
$message .= "Die Nachricht lautet:\n'".$nachricht2."'";
if(mail("info@styledesign.de", "Nutzung des Kontaktformulars", $message)){
echo "Vielen Dank für Ihre Nachricht. Sie werden in den nächsten Tagen eine Antwort erhalten.";
} else {
echo "Es ist ein unerwarteter Fehler beim Versenden der E-Mail aufgetreten.";
}
?>
Well.. this does right now absolutely nothing, and I dont know why. 好吧..现在绝对没有任何作用,我不知道为什么。 Can somebody tell me what exactly I need to fix because obviously I don't see it. 有人可以告诉我到底需要修复什么,因为显然我看不到。
Now here is a problem: 现在这是一个问题:
posting.done(function(data) {
var content = $(data).find('#content');
$("#result").empty().append(content);
});
Problem because you are passing the returned data as a jQuery selector string. 问题,因为您将返回的数据作为jQuery选择器字符串传递。 Selector strings reference the existing DOM. 选择器字符串引用现有的DOM。 So my guess is you want to do something like: 所以我想你想做类似的事情:
$("#result").empty().append(data);
Or if you are thinking of capturing a specific element from your returned string, try returning it either as JSON or XML, or use the parseHTML() method. 或者,如果您正在考虑从返回的字符串中捕获特定元素,请尝试以JSON或XML的形式返回该元素,或使用parseHTML()方法。
Edit 编辑
That was Error number 1. Error number 2 is in your PHP file. 那是错误号1。错误号2在您的PHP文件中。 You did: 您做了:
if(!isset($_POST["submit"])){
exit;
}
Now you are submitting as AJAX, and you are actually submitting name-value pairs to your PHP script, not the form itself, so the submit button is not carried alongside your form. 现在,您以AJAX的形式提交,实际上是在将名称/值对提交到PHP脚本,而不是表单本身,因此,提交按钮不会随表单一起携带。 Take off that block of code. 删除该代码块。
Error Number 3 is the returned data. 错误编号3是返回的数据。 It is automatically interpreted by jQuery as HTML, and if you check your console after submitting the form, you will see Syntax Error: Unrecognized expression ...
+ whatever your PHP script echoed. jQuery会自动将其解释为HTML,如果您在提交表单后检查控制台,则会看到Syntax Error: Unrecognized expression ...
+您的PHP脚本回显了任何内容。 To solve this, either take off this line: 要解决此问题,请取消此行:
var content = $(data).find('#content');
or use the parseHTML() method I mentioned above: 或使用我上面提到的parseHTML()方法:
var content = $($.parseHTML(data)).find('#content');
However, taking it off completely should be the best solution, because I don't really see its use there, given errors are actually echoed from your PHP script as plain strings and not HTML. 但是,完全删除它应该是最好的解决方案,因为我确实没有看到它的用途,因为错误实际上是从PHP脚本中以纯字符串而不是HTML形式回显的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.