选择其中一个单选按钮,然后单击“提交”,重定向其他页面
Select one of the radio buttons and click Submit which redirects other page
我有几个单选按钮。选择其中一个并提交时,它将重定向到与该选项对应的特定页面。
我在谷歌上搜索了很多,但似乎无法解决两个问题。
- 选择一个单选按钮,然后单击"提交重定向"
- 垂直对齐页面中心的按钮
这是代码-
<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> </p>
<p align="center"> </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标记没有正确关闭,因为在by right中,正常的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;
,我们可以做的是通过使用边距或填充将其向左移动。在更新版本的演示中,我使用了填充。如果你需要在这里演示,你可以去。祝你今天愉快
问题一:
将包装css声明更改为此
.wrapper{
width:150px;
margin:0 auto;
text-align:left;
}
您可以更改宽度并设置所需的值。。。看看这个jsfiddler 的结果
问题二:
重定向是什么意思?您将两个表单发布到同一页面,而不是重定向。如果要将值发布到其他页面,请在表单标记的"Action"属性中指定一些内容。还删除单选按钮名称属性中的空格,使其更干净
希望它能帮助
Leo
HTML
<body>
<h1 align="center">Menu</h1>
<p> </p>
<p align="center"> </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
相关文章:
- 在单击按钮前后禁用提交按钮
- 如何在单击“提交”按钮时为“新建”窗口编写JavaScript,用“确定”和“取消”显示注册信息
- 如果ng单击附加到提交按钮,则表单未验证
- 单击行以提交
- 在另一个可观察量完成后触发第二个表单提交单击
- 单击禁用表单按钮,然后提交表单
- 单击1个表单中的2个提交按钮中的1个时,如何运行脚本
- 单击表单的“提交”按钮时,获取表单中的所有INPUT和ACTION标记
- 单击输入时,将提交按钮设置为另一个
- 为什么在文本框内按回车键,单击第一个按钮并提交表单
- 无法在第一次单击事件时提交表单
- 单击提交按钮后加载图像将冻结
- 在ASP.NET中单击“提交”按钮时,使表单不刷新
- Jquery处理提交按钮's单击事件而不中断表单发布
- 由于正在加载modernizr,表单在单击时未提交
- 单击“提交”按钮后重置表单字段
- 通过单击提交按钮获取表单名称
- AJAX具有相同提交/单击功能的多个表单
- 根据提交单击动态调整 iFrame 的高度
- 从提交单击按钮后将类添加到页脚