提交无线电更改 + 防止页面重新加载，在 Firefox 中不起作用

Question

我想在单选按钮被选中时提交一个 HTML 表单，其中提交事件调用 JS 函数来防止页面重新加载（加上一些其他内容）。

下面的解决方案适用于 Chrome，但不适用于 Firefox。我在无线电检查中找到了很多关于提交 HTML 表单的答案，但是我找到的 none 解决方案在 Firefox 上有效。 Firefox 总是给我以下警告：

Form submission via untrusted submit event is deprecated and will be removed at a future date.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form id="form">
        <input type="radio" name="radio" id="radio1" onchange="this.form.dispatchEvent(new Event('submit'));">
        <input type="radio" name="radio" id="radio2" onchange="this.form.dispatchEvent(new Event('submit'));">
        <input type="radio" name="radio" id="radio3" onchange="this.form.dispatchEvent(new Event('submit'));">
    </form>
    <script>
        document.querySelector("#form").addEventListener("submit", submitExercise);

        function submitExercise(event) {
            event.preventDefault();
            console.log("test");
        }
    </script>
</body>
</html>

Answer 1

可以直接用event[=24=调用submitExcercise()方法]作为单选按钮改变时的参数。

<form id="form"> <input type="radio" name="radio" id="radio1" onchange="submitExercise(event)"> <input type="radio" name="radio" id="radio2" onchange="submitExercise(event)"> <input type="radio" name="radio" id="radio3" onchange="submitExercise(event)"> </form> <script> function submitExercise(event) { event.preventDefault(); console.log("test"); } </script>

或

当表单元素改变时调用submitExcercise()，如果任何子元素改变都会触发

<form id="form" onchange="submitExercise(event)"> <input type="radio" name="radio" id="radio1"> <input type="radio" name="radio" id="radio2"> <input type="radio" name="radio" id="radio3"> </form> <script> function submitExercise(event) { event.preventDefault(); console.log("test"); } </script>

提交无线电更改 + 防止页面重新加载，在 Firefox 中不起作用

submit on radio change + prevent page reload, not working in Firefox

html

javascript

forms

events

addeventlistener