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的提交事件。