我有1个html页面,包含2个单选按钮和2个不同的php页面page1.php和page2.php,我想在选择第一个单选按钮时加载page1.php并在选择第二个单选按钮时加载page2.php。 / p>
任何JS代码示例或部分都会对我有所帮助。
这是HTML代码
<td align="center" class="bgcolor_03">
<form>
<input type="radio" class="gender" name="group" id="group" value="Sec" />
Secondary Section
<input type="radio" class="gender" name="group" id="group" value="SSec" />
Seniour Secondary Section
<br />
<input type="submit" value="Done" />
</form>
</td>
提前谢谢。
答案 0 :(得分:0)
在你的Html文件中声明2 div:
<div id="page1"></div>
<div id="page2"></div>
使用JQuery并执行以下操作:
function displayPage1()
{
$.ajax({
url: 'page1.php',
type: 'GET',
success : function(data) {
$('div#page2').html("");
$('div#page1').html(data);
},
error : function(data) {
//Do something
}
});
}
function displayPage2()
{
$.ajax({
url: 'page2.php',
type: 'GET',
success : function(data) {
$('div#page1').html("");
$('div#page2').html(data);
},
error : function(data) {
//Do something
}
});
}
在单选按钮上添加单击事件以调用正确的功能
答案 1 :(得分:0)
这取决于您希望如何加载页面。
您想通过ajax请求将页面加载到包含单选按钮的当前页面
您想在选择单选按钮后单击提交按钮,然后单独加载正确的页面。
由于您要求使用JS代码,我假设您选择使用选项1
你的html看起来像这样
<input type="radio" id="launch-page1" class="page-launcher" />
<input type="radio" id="launch-page2" class="page-launcher" />
<div id="hold-page1"></div>
<div id="hold-page2"></div>
你的JS(请问JQuery)看起来像这样。
$(function(){
$(".page-launcher").click(function () {
if ( $(this).attr("id") === "launch-page1" ) {
window.location.replace(path_to_page1);
} else {
window.location.replace(path_to_page2);
}
}
});
干杯!
答案 2 :(得分:0)
首先,如果您使用相同的ID超过1个元素,那么这不是一个好习惯。所以,我将你的表单,尤其是单选按钮更改为:
HTML
<form>
<input type="radio" class="gender" name="group" id="group1" value="Sec" />
Secondary Section
<input type="radio" class="gender" name="group" id="group2" value="SSec" />
Seniour Secondary Section
<br />
<input type="submit" value="Done" />
</form>
我相信下面这个jQuery可以给你想要的东西..
的jQuery
$('input[type=submit]').click(function () {
if($('#group1').prop('checked') == true){
document.location.href = 'url here';
}
if($('#group2').prop('checked') == true){
document.location.href = 'url here';
}
});
答案 3 :(得分:0)
这是您使用PHP的解决方案。 确保将HTML文件类型更改为PHP。 解释:在此示例中,如果提交了表单,我会在顶部检查。如果是,我选中了单选按钮,并将用户重定向到您的页面。
<?php
if (isset($_POST['group'])) { // "group" is mutual name of radio buttons
switch ($_POST['group']) {
case 'Sec': // Value of first radio button
header('Location: page1.php');
break;
case 'SSec': // Value of second radio button
header('Location: page2.php');
break;
default:
break;
}
}
?>
<td align="center" class="bgcolor_03">
<form action="" method="POST" >
<input type="radio" class="gender" name="group" id="group" value="Sec" />
Secondary Section
<input type="radio" class="gender" name="group" id="group2" value="SSec" />
Seniour Secondary Section
<br />
<input type="submit" value="Done" />
</form>
</td>