如何使用跨度中的值填充隱藏文本字段以訪問這些值？

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”“textContent”標簽的每一種組合都無濟於事。 還嘗試在分配值之前先將事物設置為變量。

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按鈕，這會導致您的頁面從頭開始重新加載，並且應該只使用沒有表單action的button 。

 // 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>