Question

我有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>

提前谢谢。

Answer 1

在你的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
        }
    });
}

在单选按钮上添加单击事件以调用正确的功能

Answer 2

这取决于您希望如何加载页面。

您想通过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);
        }
    }
});

干杯！

Answer 3

首先，如果您使用相同的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';
    }
});

Answer 4

这是您使用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>

如何在单选按钮选择上加载多个php页面

4 个答案: