根据表单中单选按钮中的值重定向用户提交表单

Question

我需要制作一个使用 javascript 提交的简单表单，以将用户重定向到正确的页面。

它有一个单选按钮列表，提交时我需要将用户重定向到为每个单选按钮指定的页面 URL。

看起来像这样：

我找到了一个使用 jquery 来执行此操作的 javascript，但这是在单击单选按钮时触发的。我需要有一个提交按钮。

我认为这很容易做到，而且可能是，但不知何故我找不到解决方案。

这是我使用的代码（我在 SO 上的其他地方找到了该代码，并且可以正常工作。但是没有“提交”按钮。）：

I value the most:
<form>
  <input type="radio" name="redirect" value="http://example.com/food"><span>eating food</span><br>
  <input type="radio" name="redirect" value="http://example.com/kids"><span>play with my kids</span><br>
  <input type="radio" name="redirect" value="http://example.com/fishing"><span>go fishing</span><br>
  <input type="radio" name="redirect" value="http://example.com/stackoverflow"><span>answer StackOverflow questions</span><br>
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$('input[type="radio"]').on('click', function() {
     window.location = $(this).val();
});
</script>

我应该可以使用这个：https://api.jquery.com/submit/ 但我不明白如何同时触发提交和获取正确的单选值，然后重定向。

我可以以某种方式使用上面的代码，还是需要用完全不同的方法来实现它？

我试过这个：

I value the most:
<form id="mychoice">
  <input type="radio" name="redirect" value="http://example.com/food"><span>eating food</span><br>
  <input type="radio" name="redirect" value="http://example.com/kids"><span>play with my kids</span><br>
  <input type="radio" name="redirect" value="http://example.com/fishing"><span>go fishing</span><br>
  <input type="radio" name="redirect" value="http://example.com/stackoverflow"><span>answer StackOverflow questions</span><br>
  <input type="submit" value="Go">
</form>


<script>
$( "#mychoice" ).submit(function( event ) {
window.location = $('input[type="radio"]:checked').val();
});
</script>

这个想法是用我从选中的单选按钮中获得的值打开窗口位置。这可能是完全错误的方法。没用... :-)

Answer 1

你的选择器有点不对劲。请尝试以下操作：

$('input[name="redirect"]:checked').val();

这个 JSFiddle 可能会有所帮助：

https://jsfiddle.net/yufnuwc6/2/

Answer 2

你可以试试这个

$( "#mychoice" ).submit(function( event ) {
    event.preventDefault();
    window.location = $('input[type="radio"]:checked').val();
});

Answer 3

使用按钮代替提交

<input type="button" id="submit" value="Go"> </form>

<script>

$( "#submit" ).click(function( event ) {
window.location = $('input[type="radio"]:checked').val();
});

</script>