AJAX 联系表格 - 添加字段 + 多个表格一页
AJAX Contact Form - Adding Fields + Multiple Forms One Page
所以我需要实现一个 AJAX 信息提交表单。我正在使用 Treehouse 的人构建的这个示例...... http://blog.teamtreehouse.com/create-ajax-contact-form
问题的第一部分……如何添加新字段?我试过编辑 .php .js 和 .html,让它们都符合我认为正确的内容,但在测试时我的解决方案失败了。
我需要的字段...
姓名:
地点:
Post代码:
出生日期:
URL Link:
留言(200字):
第二部分……我可以 运行 两个在同一页上吗?
提前为任何帮助干杯! - 如果你想让我发送代码等,你可以给我发邮件 garethyo@gmail.com
代码如下——
<form id="ajax-contact" method="post" action="mailer.php">
<div class="field">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="field">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="field">
<label for="link">Link:</label>
<input type="text" id="link" name="link" required>
</div>
<div class="field">
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
</div>
<div class="field">
<button type="submit">Send</button>
</div>
</form>
JS
$(formMessages).text(response);
// Clear the form.
$('#name').val('');
$('#email').val('');
$('#link').val('');
$('#message').val('');
})
.fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
PHP
<?php
// My modifications to mailer script from:
// http://blog.teamtreehouse.com/create-ajax-contact-form
// Added input sanitizing to prevent injection
// Only process POST reqeusts.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get the form fields and remove whitespace.
$name = strip_tags(trim($_POST["name"]));
$name = str_replace(array("\r","\n"),array(" "," "),$name);
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$message = trim($_POST["message"]);
// Check that data was sent to the mailer.
if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
// Set a 400 (bad request) response code and exit.
http_response_code(400);
echo "Oops! There was a problem with your submission. Please complete the form and try again.";
exit;
}
// Set the recipient email address.
// FIXME: Update this to your desired email address.
$recipient = "garethyo@gmail.com";
// Set the email subject.
$subject = "A Future Bubbler… $name ";
// Build the email content.
$email_content = "Name: $name\n";
$email_content .= "Email: $email\n\n";
$email_content .= "Link: $link\n";
$email_content .= "Message:\n$message\n";
// Build the email headers.
$email_headers = "From: $name <$email>";
// Send the email.
if (mail($recipient, $subject, $email_content, $email_headers)) {
// Set a 200 (okay) response code.
http_response_code(200);
echo "Thank You! Your message has been sent.";
} else {
// Set a 500 (internal server error) response code.
http_response_code(500);
echo "Oops! Something went wrong and we couldn't send your message.";
}
} else {
// Not a POST request, set a 403 (forbidden) response code.
http_response_code(403);
echo "There was a problem with your submission, please try again.";
}
?>
你永远不会定义 $link。您需要添加 $link = trim($_POST['link']);在 $message = trim($_POST["message"]); 之前。 – 肖恩 4 月 4 日 20:50
— Worldstar 首席执行官 Sean
所以我需要实现一个 AJAX 信息提交表单。我正在使用 Treehouse 的人构建的这个示例...... http://blog.teamtreehouse.com/create-ajax-contact-form
问题的第一部分……如何添加新字段?我试过编辑 .php .js 和 .html,让它们都符合我认为正确的内容,但在测试时我的解决方案失败了。
我需要的字段... 姓名: 地点: Post代码: 出生日期: URL Link: 留言(200字):
第二部分……我可以 运行 两个在同一页上吗?
提前为任何帮助干杯! - 如果你想让我发送代码等,你可以给我发邮件 garethyo@gmail.com
代码如下——
<form id="ajax-contact" method="post" action="mailer.php">
<div class="field">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="field">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="field">
<label for="link">Link:</label>
<input type="text" id="link" name="link" required>
</div>
<div class="field">
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
</div>
<div class="field">
<button type="submit">Send</button>
</div>
</form>
JS
$(formMessages).text(response);
// Clear the form.
$('#name').val('');
$('#email').val('');
$('#link').val('');
$('#message').val('');
})
.fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
PHP
<?php
// My modifications to mailer script from:
// http://blog.teamtreehouse.com/create-ajax-contact-form
// Added input sanitizing to prevent injection
// Only process POST reqeusts.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get the form fields and remove whitespace.
$name = strip_tags(trim($_POST["name"]));
$name = str_replace(array("\r","\n"),array(" "," "),$name);
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$message = trim($_POST["message"]);
// Check that data was sent to the mailer.
if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
// Set a 400 (bad request) response code and exit.
http_response_code(400);
echo "Oops! There was a problem with your submission. Please complete the form and try again.";
exit;
}
// Set the recipient email address.
// FIXME: Update this to your desired email address.
$recipient = "garethyo@gmail.com";
// Set the email subject.
$subject = "A Future Bubbler… $name ";
// Build the email content.
$email_content = "Name: $name\n";
$email_content .= "Email: $email\n\n";
$email_content .= "Link: $link\n";
$email_content .= "Message:\n$message\n";
// Build the email headers.
$email_headers = "From: $name <$email>";
// Send the email.
if (mail($recipient, $subject, $email_content, $email_headers)) {
// Set a 200 (okay) response code.
http_response_code(200);
echo "Thank You! Your message has been sent.";
} else {
// Set a 500 (internal server error) response code.
http_response_code(500);
echo "Oops! Something went wrong and we couldn't send your message.";
}
} else {
// Not a POST request, set a 403 (forbidden) response code.
http_response_code(403);
echo "There was a problem with your submission, please try again.";
}
?>
你永远不会定义 $link。您需要添加 $link = trim($_POST['link']);在 $message = trim($_POST["message"]); 之前。 – 肖恩 4 月 4 日 20:50
— Worldstar 首席执行官 Sean