选择其中一个单选按钮，然后单击提交重定向其他页面答案

【问题标题】：Select one of the radio buttons and click Submit which redirects other page选择其中一个单选按钮，然后单击提交重定向其他页面
【发布时间】：2013-12-12 18:35:56
【问题描述】：

我有几个单选按钮。在选择其中一个并提交时，它将重定向到与该选项对应的特定页面。

我用谷歌搜索了很多，但似乎无法摆脱两个问题。

选择一个单选按钮，然后提交重定向。
垂直对齐页面中心的按钮。

这是代码 -

<style type="text/css">
body {
    background-color: #333;
}
body,td,th {
    font-family: "Arial Black", Gadget, sans-serif;
}
form{display:inline;
}
.block{ 
position:absolute;
top:50%
}
.wrapper{
    text-align:center;
}
</style>

HTML -

<body>
<h1 align="center">Menu</h1>
<p>&nbsp;</p>
<p align="center">&nbsp; </p>
<form id="form2" name="form2" method="post" action="" >
<div class="wrapper"> 
  <label class="block"><input type="radio" name="Radio Buttons" value="radio" id="RadioButtons_0"/>Options112</label>
</div>
<div class="wrapper">
  <label class="block"><input type="radio" name="Radio Buttons" value="radio" id="RadioButtons_1" />
Option2</label> 
</div>
<div class="wrapper">
  <label class="block"><input type="radio" name="Radio Buttons" value="radio" id="RadioButtons_2" style="display:inline-block"/>
Option3</label>
</div>
</form>
<form id="form1" name="form1" method="post" action="">
<br/>
  <div align="center">
    <input type="submit" name="Submit" id="Submit" value="Submit"  />
    <input type="submit" name="Contribute" id="Contribute" value="Contribute" />
  </div>
</form>
</body>

限制是使用javascript。

【问题讨论】：

首先你没有关闭你的 div
也改变块类位置的css：相对

标签： javascript html css

【解决方案1】：

你的 html 上有一些奇怪的东西您的 div 标签没有正确关闭，因为正常的 div 标签是 <div></div> 但你的显然是<div </div>

我有一个解决方案，只需将其复制并粘贴到您当前的 html 中并查看差异。

<div class="wrapper" >
  <input type="radio" name="Radio Buttons" value="radio" id="RadioButtons_0"/>
    Option1
</div>
<div class="wrapper">
    <input type="radio" name="Radio Buttons" value="radio" id="RadioButtons_1"/>
    Option2
</div>
<div class="wrapper">
  <input type="radio" name="Radio Buttons" value="radio" id="RadioButtons_2"/>
Option3
</div>

编辑：我已经更新了代码，这是由于text-align:center;，我们可以做的是使用边距或填充将其向左移动。在更新的版本演示中，我使用了填充。如果你需要一个演示 here 你去。祝你有美好的一天

【讨论】：

问题是 Option1 和 Option2 的字符长度相同。如果我选择不同长度的名称，则不再对齐。
嘿@R11G 我已经更新了 jsfiddle，再次查看演示。如果有任何进一步的问题，请随时让我知道。干杯！

【解决方案2】：

问题一：

将包装器 css 声明更改为此

.wrapper{
    width:150px;
    margin:0 auto;
    text-align:left;
}

您可以更改宽度并设置所需的值...查看此jsfiddler中的结果

问题二：

重定向是什么意思？您将两个表单发布到同一页面，而不是重定向。如果要将值发布到不同的页面，请在表单标记的“操作”属性中指定一些内容。同时删除单选按钮名称属性中的空格以使其更清晰

希望对你有帮助

狮子座

【讨论】：

【解决方案3】：

HTML

<body>
<h1 align="center">Menu</h1>
<p>&nbsp;</p>
<p align="center">&nbsp; </p>
<form id="form2" name="form2" method="post" action="" >
<div class="wrapper"> 
  <label class="block"><input type="radio" name="Radio Buttons" value="radio" id="RadioButtons_0"/>Option1</label>
</div>
<div class="wrapper">
  <label class="block"><input type="radio" name="Radio Buttons" value="radio" id="RadioButtons_1" />
Option2</label> 
</div>
<div class="wrapper">
  <label class="block"><input type="radio" name="Radio Buttons" value="radio" id="RadioButtons_2" style="display:inline-block"/>
Option3</label>
</div>
</form>
<form id="form1" name="form1" method="post" action="">
<br/>
  <div align="center">
    <input type="submit" name="Submit" id="Submit" value="Submit"  />
    <input type="submit" name="Contribute" id="Contribute" value="Contribute" />
  </div>
</form>
</body>

JQUERY--

这将提交您的表单

  $('input[type=radio]').click(function() {
        $(this).closest("form").submit();
    });

Js Fiddle

【讨论】：

OP 提到：限制是使用javascript。