HTML表单双时间输入值一致问题求助（附PHP代码）

问题场景 #

需求：HTML表单中设置两个input，一个在表单加载时赋值时间，另一个在点击提交按钮的mousedown事件时赋值时间，要求两者时间不同。
实际问题：提交后两个输入的日期时间完全一致，例如均为2023-01-27 09:19:04。

相关代码 #

test2.php #

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
      function SetTimeToEndInput() {
        document.getElementById("End").setAttribute("value","<?php date_default_timezone_set('Asia/Tehran'); $t=time(); echo date("Y-m-d h:i:s");?>");
      }
    </script>
  </head>
  <body>
    <form class="" action="test3.php" method="post">
      <input type="text" name="Start" value="<?php date_default_timezone_set('Asia/Tehran'); $t=time();echo date("Y-m-d h:i:s")  ?>">
      <input id="End" type="text" name="End" value="">
      <input type="submit" name="" value="" onmousedown="SetTimeToEndInput()">
    </form>
  </body>
</html>

test3.php #

<?php 
  if (isset($_POST['submit'])) {
    echo $_POST['Start'];
    echo $_POST['End'];
  }
 ?>

问题原因 #

核心问题在于PHP是服务器端脚本，页面加载阶段就会执行所有内嵌的PHP代码：

• Start输入框的时间是页面加载时PHP生成的；
• 内嵌在JavaScript函数SetTimeToEndInput里的PHP时间代码，同样是在页面加载时就被执行并替换成固定的时间字符串，而非点击按钮时才计算。
  无论多久后点击提交按钮，End输入框拿到的都是页面加载时刻的时间，自然和Start的时间完全一致。

另外test3.php存在一个小问题：提交按钮的name属性为空，导致isset($_POST['submit'])永远为false，无法输出提交的时间值。

解决方案 #

1. 用客户端JavaScript生成点击时的时间 #

修改SetTimeToEndInput函数，使用JavaScript的Date对象获取当前时间，确保点击按钮时才计算最新时间：

修改后的test2.php #

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
      // 格式化Date为Y-m-d h:i:s格式的字符串
      function formatDateTime(date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      }

      function SetTimeToEndInput() {
        // 获取当前客户端时间并格式化
        const now = new Date();
        // 若需匹配服务器时区（Asia/Tehran，UTC+3:30），可手动调整时区偏移，示例为本地时区
        document.getElementById("End").value = formatDateTime(now);
      }
    </script>
  </head>
  <body>
    <form class="" action="test3.php" method="post">
      <input type="text" name="Start" value="<?php date_default_timezone_set('Asia/Tehran'); echo date("Y-m-d h:i:s") ?>">
      <input id="End" type="text" name="End" value="">
      <!-- 给提交按钮添加name属性，确保test3.php能检测到提交 -->
      <input type="submit" name="submit" value="提交" onmousedown="SetTimeToEndInput()">
    </form>
  </body>
</html>

2. 修复test3.php的提交检测 #

确保提交按钮的name为submit，这样isset($_POST['submit'])才能正常生效：

<?php 
  date_default_timezone_set('Asia/Tehran');
  if (isset($_POST['submit'])) {
    echo 'Start: ' . $_POST['Start'] . '<br>';
    echo 'End: ' . $_POST['End'];
  }
 ?>

补充说明 #

如果需要End时间严格对应服务器时区（Asia/Tehran），可以通过两种方式实现：

• 方式一：在JavaScript中手动计算时区偏移（伊朗时区为UTC+3:30）；
• 方式二：点击按钮时通过AJAX请求服务器获取当前时间，再赋值给End输入框。

内容的提问来源于stack exchange，提问作者VOA R