基于下拉选项加载内容的PHP表单_Php_Html_Wordpress

基于下拉选项加载内容的PHP表单

php html wordpress

基于下拉选项加载内容的PHP表单,php,html,wordpress,Php,Html,Wordpress,对于一个客户项目，我已经就这个问题提出了一个问题。这些答案可能不是我想要的，所以我会尽可能详细地回答这个问题我有一个有4个主页的表格。第一页要求提供个人信息。单击Submit可进入第二页。第二页有一个包含项目编号的下拉列表。假设它们是A、B、C、D、E 当访问者选择一个项目并单击“提交”时，我希望下一页根据上面选择的项目显示内容：如果访问者选择选项A，页面应加载html页面A.html或php页面A.php 如果他选择选项B，页面应加载html页面B.html或php页面B.php。等等，

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

我有一个有4个主页的表格。第一页要求提供个人信息。单击Submit可进入第二页。第二页有一个包含项目编号的下拉列表。假设它们是A、B、C、D、E

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

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

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

通常最好通过回显不同的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中完成这一切，您可以通过多种方式解决此问题，但在本例中，我推荐两种方式：PHP或JS

解决方案1，PHP 你需要

1）表格


第1页
第2页
...

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

//loadPage.php

解决方案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>


函数加载_页（）{
var selected_page=document.getElementById（“selected_page”）.value；
如果（所选页面！=“”）{
window.location.href=所选页面
//请注意，收到的值，
//在本例中，选择了第页，
//应该是一个有效的url！
//因此
//标签应该是它自己
//一个网址！
//例：有效
//无效
}
}
第1页
第2页
...
加载它！

您可以使用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>

在那些相应的页面中，你想回应什么就回应什么。

我感谢你的回复。但是，我不知道在这里该怎么办。我从未打算构建PHP表单，但我不得不这样做。使用您的代码，我创建了一个页面模板，并将其命名为formorder.php。在其中，我放置了两个代码片段。没有提交按钮，所以我将其添加到。。。你有上面的。现在，在加载表单时，我在下拉列表中看到了第1页和第2页，但它显示“未选择任何页面”，单击提交，我得到了未找到的对象！请原谅我的无知，但我不是PHP或WordPress方面的专家。请提供一份分步指导。感谢您抽出时间…好的，那么您是否100%确定与开关值匹配？我的意思是，A页和案例“A”应该是一样的。试着那样做。我将更新添加表单的代码，并尝试自己的代码来帮助您。10分钟后你就会好了。好的，代码工作正常。确保：方法在表单上是POST，并在php处理程序上是POST。或者甚至得到和得到。仔细检查标记的值，最后确保标记引用表单。您可以通过添加。如果未指定表单，则不会提供变量。：）不，没用。既然你成功了，我可能做得不对。下面是我在WordPress主题目录中所做的工作创建了页面模板“formorder.php”，并用它创建了一个页面。-已将两个代码段都添加到页面中。-已在同一目录中创建页面_1.php和页面_2.php。-表单加载后，单击“加载页面提交”按钮，页面将尝试加载，因为我正在使用计算机。上面说找不到物体。我的问题是，当loadPage.php不是在任何地方创建或加载时，为什么需要它？将表单操作替换为“#”多少字段依赖于第一页，依此类推？jquery将是一个更加优雅的解决方案，但如果您坚持使用php，也可以这样做。您将需要在下一页上使用表单字段更新您的问题，以及需要更改的内容，这两种解决方案都很容易做到，而且易于学习！所以不是免费的“编写我的代码”服务。如果你不想花足够的时间学习这个，那就付钱给别人。（我真的不明白，这样一个问题怎么会得到三张赞成票…@Yoshi我知道Stack Overflow是一个人们分享知识、提问和回答的网站。如果有人需要帮助，如果我知道这一点，我会非常乐意为他们编写代码。这个问题的答案清楚地表明，并不是这里的每个人都认为堆栈溢出是一个“编写我的代码”服务，而是一个人们贡献力量的社区。顺便说一句，我刚开始学习PHP，稍后一定会回来帮助回答其他人的问题，是的，我很乐意为他们编写代码……：）祝您今天过得愉快！！！

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

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

}