带有单选按钮的 Javascript this.form.submit()答案

【问题标题】：Javascript this.form.submit() with radio button带有单选按钮的 Javascript this.form.submit()
【发布时间】：2019-02-20 22:42:11
【问题描述】：

我的网页有这个星级评分系统，您可以在其中选择星级评分 (1-5)，我想在有人点击任何星星时发送表单，但现在它不发送收音机如果我检查某些东西，我认为它的按钮值是因为它在检查单选按钮之前发送了表单。有没有更好的方法来发送带有单选按钮值 onclick 的表单？

<form method="POST" action="/rating" accept-charset="UTF-8"><input name="_token" type="hidden" value="vySkIFDPujcmxjfs83m3OwojcbPIaHuuMhKvVErx">

        <input name="movie_id" type="hidden" value="2">


        <input id="star5" name="rating" type="radio" value="5">
        <label for="star5" class="full" title="Awesome" onclick="this.form.submit()"> </label>


        <input id="star4" name="rating" type="radio" value="4">
        <label for="star4" class="full" title="Good" onclick="this.form.submit()"> </label>


        <input id="star3" name="rating" type="radio" value="3">
        <label for="star3" class="full" title="Mediocre" onclick="this.form.submit()"> </label>


        <input id="star2" name="rating" type="radio" value="2">
        <label for="star2" class="full" title="Bad" onclick="this.form.submit()"> </label>


        <input id="star1" name="rating" type="radio" value="1">
        <label for="star1" class="full" title="Horrible" onclick="this.form.submit()"> </label>

        </form>

【问题讨论】：

把它改成 onchange 看看会发生什么
只需使用常规提交按钮。不要使用 JS 尝试将单选按钮变成提交按钮。

标签： javascript php html webpage

【解决方案1】：

在 <input /> 元素上使用 onchange 代替：

<form method="POST" action="/rating" accept-charset="UTF-8"><input name="_token" type="hidden" value="vySkIFDPujcmxjfs83m3OwojcbPIaHuuMhKvVErx">

  <input name="movie_id" type="hidden" value="2">

  <label for="star5" class="full" title="Awesome">
<input id="star5" name="rating" type="radio" value="5" onchange="this.form.submit()">
  </label>

  <label for="star4" class="full" title="Good">
<input id="star4" name="rating" type="radio" value="4" onchange="this.form.submit()">
  </label>

  <label for="star3" class="full" title="Mediocre">
<input id="star3" name="rating" type="radio" value="3" onchange="this.form.submit()">
  </label>

  <label for="star2" class="full" title="Bad">
<input id="star2" name="rating" type="radio" value="2" onchange="this.form.submit()">
  </label>

  <label for="star1" class="full" title="Horrible">
<input id="star1" name="rating" type="radio" value="1" onchange="this.form.submit()">
  </label>

</form>

【讨论】：

使用 onchange 它根本不发送表单：\
<label> 没有onchange 事件
将 onChange 事件放在 <input /> 元素上。
是的，我想，我很笨。我在单选按钮输入上使用了它，现在可以使用了，谢谢。即使 onclick 现在也可以使用它。
@dentora 很酷，答案中的代码正在使用标签... :-) 没什么愚蠢的。唯一的建议可能是拦截表单发布并在 JS 中执行，这样它就不需要在选择时执行到服务器的完整往返。