Question

对于客户项目，我已经就此问题here提出了一个问题。这些答案可能不是我想要的，所以我会尝试尽可能详细地提出这个问题。

我有一个包含4个主页的表单。第一页要求提供个人信息。单击“提交”将转到第二页。第二页有一个包含项目编号的下拉列表。假设它们是A，B，C，D，E。

当访问者选择某个项目并点击提交时，我希望下一页根据上面选择的项目显示内容：

如果访问者选择了选项A，则该页面应加载html页面 a.html 或php页面 a.php 。
如果他选择选项B，页面应加载html页面 b.html 或php页面 b.php 。等等其他项目，每个项目都有不同的页面。

我不太了解PHP。我正在WordPress的网站上构建此表单。

Answer 1

你可以通过多种方式解决这个问题，但在这种情况下我会推荐两种方式：PHP或JS。

解决方案1，PHP

你需要

1）表格

<form action="loadPage.php" method="POST" name="theForm" id="theForm">
<select form="theForm" name="selectedPage">
  <option value="page_1">Page 1</option>
  <option value="page_2">Page 2</option>
  ...
</select>
<input type="submit" value="Load page" />
</form>

2）PHP处理程序

//loadPage.php
<?php
$requested_page = $_POST['selectedPage'];

switch($requested_page) {
  case "page_1":
    header("Location: page_1.php");
  break;
  case "page_2":
    header("Location: page_2.php");
  break;
  default :
  echo "No page was selected";
  break;
}
?>

解决方案2，Javascript

假设你想在不使用PHP的情况下显示不同的页面，那么选择什么？ JavaScript的。对我来说，这更容易实现，而且更加“用户友好”：

任务：显示同一表单中的不同页面

<!DOCTYPE html>
<html>
<head>
<!-- Amazing stuff goes here :) -->
<script>
function load_page() {
    var selected_page = document.getElementById("selected_page").value;
    if (selected_page != "") {
        window.location.href = selected_page
        //Please note that the value recived,
        //in this case selected_page,
        //should be a valid url!
        //Therefore the value of the
        //<option> tag should be itself 
        //a url !
        //ex.: <option value="page.php"> is valid
        //<option value="page_1"> is not valid
    }
}
</script>
</head>
<body>
<form action="#">
    <select id="selected_page">
        <option value="page_1.php">Page 1</option>
        <option value="page_2.php">Page 2</option>
        ...
    </select>
    <button onclick="load_page()">Load it ! </button>
</form>
</body>
</html>

Answer 2

通常通过回显不同的html动态更改内容通常会更好，但这可以通过标题来实现。

请确保在标题调用之前不输出任何内容，否则它将无法正常工作。只要在重定向之前没有向客户端发送html，就可以运行PHP命令等。

if($_POST['DropDownName'] = 'ValueA')
    header("Location: a.php");
else // if(POST....) should check just in case.
    header("Location: b.php");

另一种可能的解决方案是使用iframe加载下一页，这样做的一个好处就是你可以在JS中完成所有这些

Answer 3

您可以使用AJAX函数来实现上述结果。现在我们在第二页，它有一个下拉菜单。

<select name="selectpageddl" class="form-control" onchange="selectpage(this.value)">
<option value="page_a" selected="selected">A</option>
<option value="page_b" selected="selected">B</option>
<option value="page_c" selected="selected">C</option>
<option value="page_d" selected="selected">D</option>
<option value="page_e" selected="selected">E</option>
</select>



 <div id="showpage"></div>

在下拉列表的onchange属性中，我正在调用一个AJAX函数selectpage()，我从下拉列表中传递当前选中的值...根据该值，将加载适当的页面＆安培;在showpage div中显示。

function selectpage(ipp)
{

    if(window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();

    }
    else
    {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function()//callback fn
    {
        if(xmlhttp.readyState==4 && xmlhttp.status==200)
        {

            document.getElementById("showpage").innerHTML=xmlhttp.responseText;


        }
    }

    if(ipp=='page_a')
    {
    xmlhttp.open("GET","a.php?variable="+ipp,true);
    }
    else if(ipp=='page_b')
    {
    xmlhttp.open("GET","b.php?variable="+ipp,true);
    }
   else if(ipp=='page_c')
    {
    xmlhttp.open("GET","c.php?variable="+ipp,true);
    }
   else if(ipp=='page_d')
    {
    xmlhttp.open("GET","d.php?variable="+ipp,true);
    }
    else 
    {
    xmlhttp.open("GET","e.php?variable="+ipp,true);
    }
    // alert(xmlhttp);
    xmlhttp.send();

}

在那些相应的页面中......回应你想要回应的内容。

PHP表单，根据下拉选项加载内容

3 个答案:

解决方案1，PHP

解决方案2，Javascript