如何使用单选按钮打开本地HTML页面?

时间:2015-03-08 07:21:09

标签: javascript php jquery html

我正在开发一个网页,其中包含单选按钮和相关选项。在选择单选按钮时,我想打开相应的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的解决方案。

3 个答案:

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

你应该做什么:

只需使用锚点代替单选按钮。