如何使用跨度中的值填充隐藏文本字段以访问这些值

Question

我首先说，我在这里和其他网站上看到了多个问题的解决方案，但似乎都不起作用。我想我错过了什么。如有任何帮助，我们将不胜感激。

这是HTML文件：

<form action="/stopwatch" method="post">
<label for="timer">Choose a Timer:</label>
<select name="timer" id="timer">
{% for timer in timers %}
<option id="{{ timer["timer"] }}" value="{{ timer["timer"] }}">{{ timer["timer"] }}</option>
{% endfor %}
</select>
<div id="display">
<p><span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds">00</span>:<span id="centis">00</span></p>
</div>
<div>
<button type="button" id="start" class="btn btn-primary">Start</button>
<button type="button" id="stop" class="btn btn-primary">Stop</button>
<button type="submit" id="reset" class="btn btn-primary" onclick="populate()">Save and Reset</button>
</div>
<div>
<input id="inputHours"></input>
<input id="inputMinutes"></input>
<input id="inputSeconds"></input>
<input id="inputCentis"></input>
</div>
</form>

这是JS文件。我觉得我已经尝试了"；innerHTML"innerText"text内容"标签无效。还尝试在赋值之前先将事物设置为变量。

function populate()
{
document.getElementById("inputHours").value = document.getElementById("hours").innerHTML;
document.getElementById("inputMinutes").value = document.getElementById("minutes").innerHTML;
document.getElementById("inputSeconds").value = document.getElementById("seconds").innerHTML;
document.getElementById("inputCentis").value = document.getElementById("centis").innerHTML;
}

Answer 1

只有为其定义了name属性的表单字段才会将其数据与表单的其余部分一起提交，并且您的input表单字段没有name。

此外，您没有任何"；隐藏的"；表单字段-您有空的input字段。要创建隐藏的表单字段，您需要input type="hidden"。并且，input没有得到结束标记。

您可能还想停止表单提交，直到您设置了所需的值或者，如果您实际上没有尝试在任何地方提交数据，那么您不应该使用submit按钮，这将导致您的页面从头开始重新加载，而应该只使用button而不使用表单action

// Get your DOM references just once:
const form = document.querySelector("form");
const hoursInput = document.getElementById("inputHours");
const hoursElement = document.getElementById("hours");
const minutesInput = document.getElementById("inputMinutes");
const minutesElement = document.getElementById("minutes");
const secondsInput = document.getElementById("inputSeconds");
const secondsElement = document.getElementById("seconds");
const centisInput = document.getElementById("inputCentis");
const centisElement = document.getElementById("centis");

form.addEventListener("submit", populate);
function populate(event) {
event.preventDefault(); // Stops the native form submission of a submit button
// Populate the hidden form fields
hoursInput.value = hoursElement.textContent;
minutesInput.value = minutesElement.textContent;
secondsInput.value = secondsElement.textContent;
centisInput.value = centisElement.textContent;

//form.submit(); // Submit the form
}

<form action="/stopwatch" method="post">
<label for="timer">Choose a Timer:</label>
<select name="timer" id="timer">
{% for timer in timers %}
<option id="{{ timer["timer"] }}" value="{{ timer["timer"] }}">{{ timer["timer"] }}</option>
{% endfor %}
</select>
<div id="display">
<p><span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds">00</span>:<span id="centis">00</span></p>
</div>
<div>
<button type="button" id="start" class="btn btn-primary">Start</button>
<button type="button" id="stop" class="btn btn-primary">Stop</button>
<button type="submit" id="reset" class="btn btn-primary">Save and Reset</button>
</div>
<div>
<!-- Add type="hidden" to the input elements if you really want hidden form fields -->
<input id="inputHours" name="hours">
<input id="inputMinutes" name="minutes">
<input id="inputSeconds" name="seconds">
<input id="inputCentis" name="centis">
</div>
</form>