如何从表单中获取日期值？表单取值失败技术求助

看起来你遇到了表单提交时拿不到日期输入值的问题，我帮你排查了代码里的几个关键点，咱们一步步来解决：

问题1：HTML结构不合法 #

你的表单代码里有一个多余的</div>标签，它没有对应的起始<div>，这会导致DOM结构混乱，可能影响浏览器对表单元素的解析和获取。先把这个多余的标签删掉。

问题2：表单默认提交行为导致页面刷新 #

当你点击提交按钮时，表单会默认触发页面跳转/刷新，这时候console.log(dateOfWork)的输出会一闪而过，而且函数返回值也无法保留。我们需要在results()函数里阻止表单的默认提交行为，这样就能正常查看日志并处理数据。

修改后的完整代码 #

<form class="" action="index.html" method="post" onsubmit="return results(event);"> 
  <h3>输入日期</h3> 
  <input id="dateInput" type="date" name="date" value=""> 
  <h3>当日起止时间</h3> 
  <div class="clockDiv"> 
    <p id="startDay">开始</p> 
    <p id="endDay">结束</p><br> 
    <input id="startDayInput" type="time" name="usr_time"> 
    <input id="endDayInput" type="time" name="usr_time"> 
  </div> 
  <h3>时薪</h3> 
  <input type="number" name="wage" value=""> 
  <input class="submitbtn" type="submit" name="Submit" value="提交"> 
</form>

<script>
function results(event) { 
  // 阻止表单默认提交行为，避免页面刷新
  event.preventDefault();
  
  var dateOfWork = document.getElementById('dateInput').value; 
  console.log(dateOfWork); 
  
  // 这里可以添加你后续要处理日期的逻辑，比如发送到后端等
  
  return false; // 也可以通过返回false阻止提交，不过用event.preventDefault()更直观
} 
</script>

关键修改说明 #

• 给results()函数添加event参数，调用event.preventDefault()阻止表单默认提交，这样页面不会刷新，你能在控制台清晰看到日期值的输出。
• 移除了多余的</div>标签，确保HTML结构合法，浏览器能正确解析所有表单元素。
• 如果之后需要真正提交表单数据到后端，可以在获取到日期值后，用AJAX发送请求，或者在处理完逻辑后手动触发表单提交。

这样修改后，你就能正常获取用户提交的日期信息了。

内容的提问来源于stack exchange，提问作者Henrik Knudsen