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

how to load multiple php page on radio button selection

本文关键字：PHP 页面 加载 单选按钮 选择      更新时间：2023-09-26

我有1个html页面包含2个单选按钮和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>

提前感谢。

这是您的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>

在你的Html文件中声明2div:

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

在单选按钮上添加click事件以调用正确的函数

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

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

干杯!

首先，如果为多个元素使用相同的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';
    }
});
相关文章：