HTML/JS - 使用來自 HTML 字段元素的值填充“確認”彈出窗口

Question

我有以下表單字段來收集用戶的基本輸入（金額）。

        <tr><td><span class="qText" name="settlement">1. Amount:</span></td></tr> 
        <td><input type="hidden" class="qAns" name="settlement_t1_a">
            <input type="text" class="qAns" id="recovery_val" name="settlement_t1" oninput="formatValue('1');" required></td>

當用戶單擊提交按鈕說“驗證金額是否正確”時，我試圖顯示一個確認彈出窗口，並顯示他們在上述字段“settlement_t1”中輸入的金額。

我在這里做錯了什么？

<div class="submitDiv"><input type="submit" onclick="return confirm('Please confirm recovery amount is correct: $' + document.getElementsByName("settlement_t1")[0].value;" value="Submit Form"></div>

一切正常，直到我嘗試插入元素。 如中，我可以讓它提示“請確認恢復金額是正確的：$”，但沒有金額。

Answer 1

 function doConfirm() { return confirm('Please confirm recovery amount is correct: $' + document.getElementsByName("settlement_t1")[0].value); } function formatValue(value) { return value; }

 <form method="post"> <input type="hidden" class="qAns" name="settlement_t1_a" /> <input type="text" class="qAns" id="recovery_val" name="settlement_t1" oninput="formatValue('1');" required /> <div class="submitDiv"><input type="submit" onclick="return doConfirm()" value="Submit Form" /></div> </form>

Answer 2

問題的很大一部分是您正在使用內聯事件屬性，這是一種已有 25 年歷史的事件處理遺留方法，它只需要死，但不會因為人們看到其他人在使用它並且他們只是復制它。 相反，將 JavaScript 與 HTML 分開，並使用 .addEventListener .addEventListener()設置事件。

您還將click事件處理程序添加到submit按鈕，當您應該將代碼添加submit form的submit事件時，它會觸發form的提交事件。