从 JavaScript 函数返回值到 HTML 表单输入值属性答案

【问题标题】：Returning Value from JavaScript Function into HTML Form Input Value Attribute从 JavaScript 函数返回值到 HTML 表单输入值属性
【发布时间】：2021-06-11 10:07:34
【问题描述】：

我正在尝试以 mySQL 所需的特定格式使用当前日期和时间自动填充表单元素。我的困难是将这个值自动填充到表单元素中。到目前为止，我已经尝试使用 .getElementById("element_id").innherHTML = timestamp 但这不会导致任何文本填充表单元素：

<html>
<head>
<title>Create New Reservation</title>
<script>
function Timestamp()
{
const currentTime = new Date();
var year = currentTime.getFullYear();
var month = currentTime.getMonth();
var day = currentTime.getDate();
var dash = "-";
var space = " ";
var colon = ":";
var hour = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
var timestamp = year.toString().concat(dash, month, dash, day, space, hour, colon, minutes, colon, seconds);
document.getElementById("occurred").innerHTML = timestamp;
}
</script>
</head>
<body onload="Timestamp()">
<h1>Enter Reservation Details</h1>
<form method="POST" action="reservation_process.php">
<fieldset>
<label>Current Time</label><type="text"/>
<input type="text" id="occurred" name="occurred"
<br>
<input type="submit" name="Process" value="Create Entry" />
</form>
</body>
</html>

我也尝试将格式化的时间戳从函数直接返回到 value="" 属性，但我怀疑我的语法不正确，并且我无法找到任何关于如何正确执行此操作的 HTML 文档：

【问题讨论】：

标签： javascript html

【解决方案1】：

您可以在函数中使用$('#occurred').val(timestamp); 而不是document.getElementById("occurred").innerHTML = timestamp;。

$(element).val(value) 设置输入的值，如果您还没有，则需要包含 jQuery 才能使用它。

function Timestamp(){
  const currentTime = new Date();
  var year = currentTime.getFullYear();
  var month = currentTime.getMonth();
  var day = currentTime.getDate();
  var dash = "-";
  var space = " ";
  var colon = ":";
  var hour = currentTime.getHours();
  var minutes = currentTime.getMinutes();
  var seconds = currentTime.getSeconds();
  var timestamp = year.toString().concat(dash, month, dash, day, space, hour, colon, minutes, colon, seconds);
  $('#occurred').val(timestamp);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>Create New Reservation</title>
<script>

</script>
</head>
<body onload="Timestamp()">
<h1>Enter Reservation Details</h1>
<form method="POST" action="reservation_process.php">
<fieldset>
<label>Current Time</label><type="text"/>
<input type="text" id="occurred" name="occurred"
<br>
<input type="submit" name="Process" value="Create Entry" />
</form>
</body>
</html>

【讨论】：

为什么是 jQuery ？？？ OP只需要把document.getElementById("occurred").innerHTML改成document.getElementById("occurred").value！