Question

第一篇文章。 PHP noob。我对这有多么困难感到惊讶......

我有一个带有提交按钮的html表单（index.html），该按钮发布到php文件（sendemail.php）。

php文件设置为收集表单数据并通过电子邮件发送到我指定的地址。

我希望在发送此电子邮件时在提交按钮旁边显示成功图标。（老实说，没有失败的条件，所以当用户点击提交时，我会很高兴只显示成功图标，所以他们知道不要一直点击提交。

在阅读了这个和许多其他论坛后，我尝试了很多方法。我已经在这两天了，可以使用一些帮助。

以下是一些片段。我基本上只是想检测在php文件中发送的电子邮件，然后使用echo json_encode将标志（$ val）发送回HTML页面。我尝试使用带有onload触发器的javascript捕获它，然后在提交操作完成后刷新页面时尝试使用javascript来操作DIV可见性。

它处理php但它似乎没有到达Header行重新加载html页面。它只是刷新屏幕并显示单词＆＃34; inline＆＃34;没有别的。

我很难过。请帮忙！感谢

sendmail.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"; 
}
?>

html中的javascript

<script type="text/javascript">
      function success(){
      var val = <?php echo json_encode($val); ?>;
       document.getElementById('success').setAttribute('display', val);

         }
       window.onload = success;
    </script>

HTML DIV我试图控制

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

我身体上有一个onload来调用一个函数将绿色复选标记设置为＆＃34;隐藏＆＃34;，只是为了保持整洁：

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

表单提交按钮，当前为type = button

<input style="background-color: #99d6ff; text-align:center;

font-weight：bold;＆＃34; value =＆＃34;添加事件＆＃34; ID =＆＃34;的addEvent＆＃34;命名=＆＃34;的addEvent＆＃34;的onclick =＆＃34; processmain（）;＆＃34;

           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＆＃34;成功的一部分＆＃34;状态：

     <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，以便发送电子邮件。我需要页面不刷新，所以我可以正确介绍绿色复选标记。

请查看我如何在我的代码中实施您的解决方案，让我知道我做错了什么。谢谢!!

Answer 1

你想要的是带有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);
}

只需在用户点击html表单上的提交时显示绿色复选标记

1 个答案: