第一篇文章.PHP菜鸟。我很惊讶这有多困难...
我有一个带有提交按钮的html表单(index.html),该按钮可以发布到php文件(sendemail.php)。
php文件设置为收集表单数据并通过电子邮件发送到我指定的地址。
我想在发送此电子邮件时在提交按钮旁边显示一个成功图标。 (老实说,没有失败条件,所以我很乐意在用户单击提交时显示成功图标,这样他们就知道不要继续单击提交)。
在阅读了本文和许多其他论坛后,我尝试了许多方法。我已经在这里呆了两天,可以使用一些帮助。
以下是一些片段。 我基本上只是尝试检测在 php 文件中发送的电子邮件,然后使用 echo json_encode 发送一个标志 ($val) 回到 HTML 页面。我尝试使用带有 onload 触发器的 javascript 捕获它,然后尝试使用 javascript 在提交操作完成后刷新页面时操纵 DIV 可见性。
它处理 php,但它似乎没有到达标题行来重新加载 html 页面。它只是刷新了屏幕并显示"内联"一词,仅此而已。
我被难住了。请帮忙! 谢谢
发送邮件.php
// Check, if message sent to your email
// mark success or fail then refresh page
if($send_contact){
$val="inline";
echo json_encode($val);
}
else {
echo "Error";
}
if($send_contact){
header('location:index.html');
}
else {
echo "Error";
}
?>
JavaScript in HTML
<script type="text/javascript">
function success(){
var val = <?php echo json_encode($val); ?>;
document.getElementById('success').setAttribute('display', val);
}
window.onload = success;
</script>
我试图控制的网页分类
<div style="text-align: left; font-weight: bold; color:#000000; display:val;"
class="success" id="success" name="success"><img src="success.png"
height="25px">Event added! It may take 20 minutes to appear on
the calendar. </div>
更新:
好的,我尝试了manRo的建议,并且能够从绿色复选标记中获得我想要的行为......它将在页面加载时隐藏,然后在从 PHP 文件收到 200 状态消息时出现。
但是,当我尝试将此逻辑构建到我的ajax中时,某些内容已损坏,并且表单数据不再提交,并且绿色复选标记逻辑停止工作。
请允许我浏览我的更新:
目前我的脚本标题如下所示:
<script type="text/javascript" src="util-functions.js"></script>
<script type="text/javascript" src="clear-default-text.js"></script>
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
我在正文中有一个加载来调用一个函数将绿色复选标记设置为"隐藏",只是为了保持整洁:
<body onload="setdisplay()">
调用此函数:
<script>
function setdisplay();
document.getElementById("success").style.display = "none";
</script>
我现在像这样开始我的表单:
<form id="main" name="main" action="">
下面是一个示例输入:
<td style="text-align: right; "> <br>
</td>
<td><input id="title" name="title" value="Event title" class="cleardefault rounded"
required="true" type="text"> </td>
表单提交按钮,当前为类型=按钮
<input style="background-color: #99d6ff; text-align:center;
font-weight: bold;" value="Add event" id="addevent" name="addevent" onclick="processmain();"
class="button" type="button">
这是我需要根据成功情况显示或隐藏的 DIV:
<div style="text-align: left; font-weight: bold; color:#000000; display:none;"
class="success" id="success" name="success"><img src="success.png"
height="25px"></div>
现在强大的部分....我尝试将您的manRo的建议集成到我的主表单处理脚本中,作为ajax"成功"状态的一部分:
<script>
}
function processmain()
{
// event.preventDefault();
var title = $("input#title").val();
var location = $("input#location").val();
var startdate = $("input#startdate").val();
var starttime = $("input#starttime").val();
var enddate = $("input#enddate").val();
var endtime = $("input#endtime").val();
var other = $("input#other").val();
$.ajax({
url: "sendemail.php",
type:'POST',
data:
{
title: "title",
location: "location",
startdate: "startdate",
starttime: "starttime",
enddate: "enddate",
endtime: "endtime",
other: "other"
},
success: function(event)
{
$.get('sendmail.php', function(data) {
document.getElementById("success").style.display = "inline";
})
}
});}
</script>
目前:表单数据不会传递给 php绿色复选标记不显示屏幕不再刷新(因为按钮类型=按钮现在,而不是提交)。
我觉得我离得很近。我需要将表单数据发送到 php,以便发送电子邮件。我需要页面不刷新,以便我可以正确引入绿色复选标记。
请看一下我如何在代码中实现您的解决方案,并让我知道我做错了什么。谢谢!!
的是带有ajax调用php脚本的HTML表单,该脚本将在成功时返回200个http状态代码。
我将尝试通过非常简单的例子向您解释。
请看下面的 html 文件:
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
</head>
<body>
<form action="sendmail.php">
<input type="email" name="email"/>
<input type="submit"/>
</form>
<script>
$(document.forms[0]).submit(function(event) {
event.preventDefault();
$.get('sendmail.php', function(data) {
alert('all good');
});
});
</script>
</body>
</html>
在这种情况下,sendmail.php
应包含负责发送电子邮件的代码,例如:
<?php
//code here...
if ($email_sent) {
http_response_code(200);
} else {
http_response_code(400);
}