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

Just want to show a green checkmark when user clicks Submit on html form

本文关键字：显示 提交 单击 用户 html 表单 只想      更新时间：2023-09-26

第一篇文章.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);
}
相关文章：