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

Question

我有 1 个包含 2 个单选按钮的 html 页面和 2 个不同的 php 页面 page1.php 和 page2.php，我想在选择第一个单选按钮时加载 page1.php，在选择第二个单选按钮时加载 page2.php。

任何示例或一段 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

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

Answer 2

在您的 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 3

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

1. 您希望通过 ajax 请求将页面加载到当前页面中，并按住单选按钮

2. 您希望在选择单选按钮后单击提交按钮，然后自行加载正确的页面。

由于您要求提供 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 4

首先，如果您对多个元素使用相同的 ID，这不是一个好习惯。因此，我将您的表单，尤其是单选按钮更改为：

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';
    }
});