javascript - 选择其中一个单选按钮并单击重定向其他页面的提交

标签 javascript html css

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

我用谷歌搜索了很多,但似乎无法解决两个问题。

  • 选择一个单选按钮并提交重定向。
  • 在页面中央垂直对齐按钮。

这是代码 -

<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。

最佳答案

你的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你去。祝你有个愉快的一天

关于javascript - 选择其中一个单选按钮并单击重定向其他页面的提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20536129/

相关文章:

html - 内嵌高度修复的标签和复选框

html - CSS 内容属性在 MSIE 中不起作用?

javascript - 根据数据库值更改记录的颜色,extjs4.2

javascript - Node.js 在错误的文件路径上崩溃

javascript - 为 :checked 之前的所有元素设置样式

javascript - 在现有的 HTML CSS 网站中使用 Vue.js 时,div 的排列不符合预期

javascript - 如何在有背景图片的 Canvas 上添加 'hidden' 网格?

JavaScript - 如何打开新页面并将 JSON 数据传递给它?

javascript - 一组按钮上的 JQuery 单击事件

javascript - 响应式 Div