我正在开发一个网页,其中包含单选按钮和相关选项。在选择单选按钮时,我想打开相应的html页面。我发现这个问题的唯一解决方案是包含外部网页的URL,这是我不想要的。
我现在的HTML代码是:
<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
</head>
<body>
<h2>Select your user classification below:</h2>
<form >
<input type="radio" name="usertype" value="admin">Admin
<br>
<input type="radio" name="usertype" value="hod">HOD
<br>
<input type="radio" name="usertype" value="tstaff">Teaching Staff
<br>
<input type="radio" name="usertype" value="ntstaff">Non Teaching Staff
<br>
<input type="radio" name="usertype" value="cr">CR
<br>
<input type="radio" name="usertype" value="student">Student
</br>
<input type="submit" value="Submit">
</form>
</body>
</html>
示例:如果我选择管理员并点击提交,我想打开“admin.html”,它与“index.html”位于同一文件夹中
我们将非常感谢使用Javascript,JQuery和PHP的解决方案。
答案 0 :(得分:1)
您可以拥有此脚本:
$(function(){
$('form').on('submit',function(){
event.preventDefault();
location.href =$("input[name=usertype]:checked").val()+".html";
});
});
答案 1 :(得分:0)
$(function(){
$('form').on('submit',function(){
event.preventDefault();
var value=$("input[name=usertype]:checked").val();
switch(value){
case "admin": location.href='admin.html'; break;
case "hod": location.href='hod.html'; break;
case "tstaff": location.href='tstaff.html'; break;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Select your user classification below:</h2>
<form >
<input type="radio" name="usertype" value="admin">Admin
<br>
<input type="radio" name="usertype" value="hod">HOD
<br>
<input type="radio" name="usertype" value="tstaff">Teaching Staff
<br>
<input type="radio" name="usertype" value="ntstaff">Non Teaching Staff
<br>
<input type="radio" name="usertype" value="cr">CR
<br>
<input type="radio" name="usertype" value="student">Student
</br>
<input type="submit" value="Submit">
</form>
答案 2 :(得分:0)
这可能有用。单击单选按钮时,它将打开一个窗口。你需要通过“开放”来解释你的意思。导航,弹出?另一个标签?新窗户?
<style type="text/css">
button{border:0;}
</style>
<form action="link" target="_blank" ><button type="submit">
<input type="radio" name="usertype" value="admin">Admin
</button></form>
将ID添加到单选按钮
<input id="r1" type="radio" name="usertype" value="admin">Admin
<input id="r2" type="radio" name="usertype" value="hod">HOD
替换
<input type="submit" value="Submit">
用
<button type="button" onclick="go()">Submit</button>
JS代码:
function go(){
if(document.getElementById('r1').checked){location.href='admin.html';}
else if(document.getElementById('r2').checked){location.href='hod.html';}
}
属性.checked返回true或false。
只需使用锚点代替单选按钮。