- html - 我的下拉菜单的内容关闭得太快
- c# - 使用 Html Agility Pack 从网页中的表中获取值而不使用 "SelectNode'
- html - 内容容器下的 CSS 下拉菜单
- html - 如何停止嵌套列表重叠父列表?
我正在按照指南构建引导联系表单并通过 mail.php 提交它,而无需使用 ajax 重新加载页面。在我尝试实现 ajax 之前,我能够让表单正常工作。我陷入困境,因为说明不清楚具体需要替换哪些代码以及新代码应该放在哪里。这是我正在关注的指南和我所停留的部分的链接:
Sending email without reloading page using AJAX
这是我试图让它工作的网站:CRANE TECH. NET
我对 php 不太熟悉,所以我想这就是我搞砸的地方。
这是我正在使用的确切代码:
HTML
<section class="section">
<h2 class="section-heading text-muted h4 pt-4">Free Consultation</h2>
<!--CONTACT DESCRIPTION-->
<p class="section-description">Are you ready to turn your vision into a reality? Fill out the contact form below and a member of our team will get back to you as soon as possible. Let's bring your idea to life!</p>
<div class="row">
<div class="col-12">
<form id="contact-form" name="contact-form" action="mail.php" method="POST">
<div class="row">
<!--NAME INPUT-->
<div class="col-12">
<div class="md-form">
<input type="text" id="name" name="name" class="form-control" placeholder="* NAME" required>
<label for="name" class=""></label>
</div>
</div>
<!--EMAIL INPUT-->
<div class="col-12">
<div class="md-form">
<input type="text" id="email" name="email" class="form-control" placeholder="* EMAIL" required>
<label for="email" class=""></label>
</div>
</div>
</div>
<div class="row">
<!-- PHONE NUMBER INPUT -->
<div class="col-12">
<div class="md-form">
<input type="text" id="clientPhone" name="clientPhone" class="form-control" placeholder="PHONE" required>
<label for="phone number" class=""></label>
</div>
</div>
<!--SUBJECT INPUT-->
<div class="col-12">
<div class="md-form">
<input type="text" id="subject" name="subject" class="form-control" placeholder="* SUBJECT" required>
<label for="subject" class=""></label>
</div>
</div>
</div>
<div class="row">
<!--MESSAGE INPUT-->
<div class="col-12">
<div class="md-form">
<textarea type="text" id="message" name="message" rows="3" class="form-control md-textarea" placeholder="* MESSAGE" required></textarea>
<label for="message"></label>
</div>
</div>
</div>
</form>
<!-- SUBMIT BUTTON -->
<div class=" col-3 offset-3 offset-md-4 mb-4">
<button class="btn btn-warning" onclick="validateForm()">Send <i class="fa fa-paper-plane ml-1"></i></button>
</div>
<div id="status" class="text-muted col-12 col-md-8 offset-md-2 my-1"></div>
</div>
JS
function validateForm() {
var name = document.getElementById('name').value;
if (name == "") {
document.getElementById('status').innerHTML = "Name cannot be empty";
return false;
}
var email = document.getElementById('email').value;
if (email == "") {
document.getElementById('status').innerHTML = "Email cannot be empty";
return false;
} else {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (!re.test(email)) {
document.getElementById('status').innerHTML = "Email format invalid";
return false;
}
}
var subject = document.getElementById('subject').value;
if (subject == "") {
document.getElementById('status').innerHTML = "Subject cannot be empty";
return false;
}
var message = document.getElementById('message').value;
if (message == "") {
document.getElementById('status').innerHTML = "Message cannot be empty";
return false;
}
document.getElementById('status').innerHTML = "Sending...";
formData = {
'name': $('input[name=name]').val(),
'email': $('input[name=email]').val(),
'clientPhone': $('input[name=clientPhone]').val(),
'subject': $('input[name=subject]').val(),
'message': $('textarea[name=message]').val()
};
document.getElementById('contact-form').submit();
$.ajax({
url: "mail.php",
type: "POST",
data: formData,
success: function(data, textStatus, jqXHR) {
$('#status').text(data.message);
if (data.code) //If mail was sent successfully, reset the form.
$('#contact-form').closest('form').find("input[type=text], textarea").val("");
},
error: function(jqXHR, textStatus, errorThrown) {
$('#status').text(jqXHR);
}
});
}
MAIL.PHP
<?php
if(isset( $_POST['name']))
$name = $_POST['name'];
if(isset( $_POST['email']))
$email = $_POST['email'];
if(isset( $_POST['clientPhone']))
$clientPhone = $_POST['clientPhone'];
if(isset( $_POST['subject']))
$subject = $_POST['subject'];
if(isset( $_POST['message']))
$message = $_POST['message'];
$name = $_POST['name'];
$email = $_POST['email'];
$clientPhone = $_POST['clientPhone']
$message = $_POST['message'];
$subject = $_POST['subject'];
header('Content-Type: application/json');
if ($name === ''){
print json_encode(array('message' => 'Name cannot be empty', 'code' => 0));
exit();
}
if ($email === ''){
print json_encode(array('message' => 'Email cannot be empty', 'code' => 0));
exit();
} else {
if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
print json_encode(array('message' => 'Email format invalid.', 'code' => 0));
exit();
}
}
if ($subject === ''){
print json_encode(array('message' => 'Subject cannot be empty', 'code' => 0));
exit();
}
if ($message === ''){
print json_encode(array('message' => 'Message cannot be empty', 'code' => 0));
exit();
}
// if ($name === ''){
// echo "Name cannot be empty.";
// echo "<br>";
// echo "<br>";
// echo "<a href='index.html'>GO BACK</a>";
// die();
// }
// if ($email === ''){
// echo "Email cannot be empty.";
// echo "<br>";
// echo "<br>";
// echo "<a href='index.html'>GO BACK</a>";
// die();
// } else {
// if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
// echo "Email format invalid.";
// echo "<br>";
// echo "<br>";
// echo "<a href='index.html'>GO BACK</a>";
// die();
// }
// }
// if ($subject === ''){
// echo "Subject cannot be empty.";
// echo "<br>";
// echo "<br>";
// echo "<a href='index.html'>GO BACK</a>";
// die();
// }
// if ($message === ''){
// echo "Message cannot be empty.";
// echo "<br>";
// echo "<br>";
// echo "<a href='index.html'>GO BACK</a>";
// die();
// }
$content="From: $name \n Email: $email \n Phone #: $clientPhone \n Subject: $subject \n Message: $message";
$recipient = "support@crane-tech.net";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $content, $mailheader) or die("Error!");
print json_encode(array('message' => 'Email successfully sent!', 'code' => 1));
exit();
?>
最佳答案
您的主要问题是 php 代码中缺少分号 (;) 和第 15 行末尾。
您的网站正在使用 JQuery Slim,$.ajax
未包含在 slim 版本中,因此您会收到错误消息。要解决此问题,只需包含完整的 JQuery 或在没有 JQuery 的情况下执行 ajax。
您可能还想摆脱这一行:document.getElementById('contact-form').submit();
因为当您已经手动提交数据时,它会导致重定向。
您应该删除这些行,因为您已经设置了它们:
$name = $_POST['name'];
$email = $_POST['email'];
$clientPhone = $_POST['clientPhone']
$message = $_POST['message'];
$subject = $_POST['subject'];
<小时/>
如果您已经在使用 JQuery,那么您应该使用它 - 而不是这样做:document.getElementById('status')
您应该使用:$('#status')
关于javascript - 使用 Ajax 提交联系表单而无需重新加载页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50381523/
我正在尝试连接到 webapi,该位置在我的 js jquery 文件中看起来像这样。 example.com/?var=input 有没有比 ajax 调用更简单的方法? 最佳答案 我会为此使用 A
我编写了 PHP 代码,它连接到 MYSQL 来查找信息,将其发送到 API,并获取响应以写回到新表中。 有时它工作得很好,有时则不然。如果没有,它会给我这个错误 You have an error
每个子列表都意味着他们是 friend ,现在我想创建一个函数 def is_connected_via_friendships_with 来检查他们是否通过与另一个人的友谊联系在一起。例如,玛丽是卢
我正在尝试将 Cassandra 与 Hector 联系起来: public class Main { public static void main(String[] args) {
我正在使用 mautic API 进行电子邮件列表和电子邮件发送。我正在尝试使用 mautic API auth2.0 获取所有电子邮件列表我正在正确获取访问 token ,但是当我像这样调用电子邮件
我已经与Windows Forms Application进行了简单的聊天。我正在使用套接字,当我尝试连接本地IP时,一切正常,并且可以在本地发送消息。 但是,当我尝试使用外部IP连接到我的 frie
我正在开发我的第一个 GWT 应用程序,它将使用来自 RESTful API 的数据。 我试图找出构建整个应用程序的最佳方法。 GWT 客户端应该与 Java 服务器端联系,然后再联系 API,还是
我对线程中的异常处理有疑问。我有一个简单的 WCF 服务,它需要一些字节作为输入。此 WCF 服务是从控制台应用程序调用的。 方法片段(我的方法) try { _service.ImportBy
我正在尝试编写一个基本的卷应用程序。由于我是用 Ruby 编写的,因此我不想扩展 C 库或使用 ffi ,而是尝试使用 ruby-dbus 编写它,我使用 Address 获得了 /org/pulse
我知道在 CRM 2011 中您无法将联系人转换为潜在客户。在 CRM 2013 中是否可行。 简单来说,我创建了一个联系人并将其分组到一个帐户中。我想将此联系人转换为潜在客户,以便我可以输入销售信息
如何在我的网站页面上添加共享按钮,我们可以使用以下代码在移动 HTML 页面上添加发送短信: title 如何在 Viber、Watsapp 等分享中使用此示例 最佳答案 仅限 HTML 页面。我通常
我想了解 Azure 在门户中创建 Web 应用程序机器人时会做什么。 An Azure Bot Service Bot deployed to an Azure App Service Web Ap
我目前正在构建 Android 4.4。与 seek-for-android在我的 Nexus 5 上获得 UICC 支持。 到目前为止还没有成功。我确实应用了提到的所有补丁 here和 here .
我开发了一个用于农村 Activity 和监控/管理的应用程序。 我的应用程序在白天收集了大量数据,需要将其发送到云端进行处理和分析。在一个正常的 8 小时工作日中,它可以收集多达 2Gb 的数据(大
我编写了一个连接器来从 mysql 获取数据,当 iam 在路由内运行 Mysql 连接器时,它显示错误,并且浏览器正在运行到无限循环。 var express = require('express'
我最近有一个高级主题,mailchimp 的表单看起来非常酷。 我想知道我是否可以将样式用于我的 3 Field Based Contact 表单“REQUEST A CALL BACK”- 名称输入
我正在尝试将基本的 onClick 事件附加到设备中的联系人列表。联系人列表已正确生成。我的代码摘要如下: public class Contacts extends AppCompatActivit
我有一种方法可以根据 Active Directory 验证用户凭据。我想将此方法与 SSL 结合使用,但无法正常工作。 主要问题是我有一个在我们网络之外的服务器(它叫 DMZ 吗?)。从那里我想联系
我正准备在 symfony Doctrine 中开始一个项目,但我必须与多个数据库建立连接。其中之一是无法使用 ORM 映射的现有数据库 (SQL SERVER)。是否有可能将此数据库与另一个未在 D
尝试为 openstack USSURI 版本设置 Controller 节点时。我被要求将 Glance 服务设置为 VM 图像管理子服务。 根据要求:article (在 ubuntu 18.04
我是一名优秀的程序员,十分优秀!