HTML:在单选按钮检查时提交表单

Question

我有一个显示两个单选按钮的表单(使用 PHP)。

echo "<form action=\"next.php\" method=\"post\">";
   echo "<input type=\"radio\" name=\"paid\" value=\"0\" checked=\"checked\">No<br>";
   echo "<input type=\"radio\" name=\"paid\" value=\"1\">Yes<br>";
echo "</form>";

默认情况下始终选中其中一个单选按钮。 如果用户选中另一个单选按钮，我希望表单自行提交(用户不必单击提交按钮)。

Answer 1

最简单(但被认为是不好的做法)是将内联 onchange="this.form.submit();" 属性附加到您的输入元素，例如:

echo '<form action="next.php" method="post">
  <label><input onchange="this.form.submit();" type="radio" name="paid" value="0" checked="checked">No</label><br>
  <label><input onchange="this.form.submit();" type="radio" name="paid" value="1">Yes</label>
</form>';

但是像 onchange 这样的内联 on* 属性使代码难以调试和维护。 JavaScript 应该只在一个地方，那就是相应的脚本标签或文件。因此，这是更好的建议:

echo '<form action="next.php" method="post">
 <label><input type="radio" name="paid" value="0" checked="checked">No</label><br>
 <label><input type="radio" name="paid" value="1">Yes</label>
</form>';

const elForm = document.querySelector("form[action='next.php']");
const elsRadio = elForm.querySelectorAll("input[type='radio']");

elsRadio.forEach((elInp) => {
  elInp.addEventListener("change", () => {
    elForm.submit();
  });
});