PHP form that loads content based on dropdown opti

I have already asked a question regarding this issue here, for a client project. Those answers may not be what I am looking for, so I will try to make this question as detailed as possible.

I have a form which has 4 main pages. The first page asks for personal information. Clicking on Submit takes you to a second page. Second page has a dropdown list containing item numbers. Let's say they are A, B, C, D, E.

When a visitor chooses an item and clicks submit, I want the next page to show content based on the item chosen above:

If visitor chooses option A, the page should load the html page a.html or php page a.php.
If he selects option B, the page should load the html page b.html or php page b.php. And so on for other items, each one having a different page.

I don't know PHP in detail. I am building this form in a website on WordPress.

标签： php html wordpress

3条回答

做个烂人

2楼-- · 2019-05-18 06:38

You can use an AJAX function to achieve the above mentioned result. Now we are in second page which has a drop down menu.

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

And in the onchange property of the dropdown, I'm calling an AJAX function selectpage(), to which I pass the currently selected value from drop down...SO based on that value, appropriate page will be loaded & shown inside the 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();

}

And in those corresponding, pages.....echo whatever you want to echo.

0人赞添加讨论(0) 举报

该账号已被封号

3楼-- · 2019-05-18 06:47

You can get around this problem in many ways, but in this case I would recommend two ways: PHP or JS.

Solution 1, PHP

You will need

1) A form

<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) A PHP handler

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

Solution 2, Javascript

Let's say that you'd like to display different pages without using PHP, then what to choose? JavaScript. This is, to me, more easy to implement and much more "user-friendly" :

Task: Display different pages from the same form

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

0人赞添加讨论(0) 举报

放荡不羁爱自由

4楼-- · 2019-05-18 06:57

It is usually better to dynamically change the content via echo-ing different html, but this can be achieved through headers.

Just be sure not to output ANYTHING before the header calls or it will not work properly. Running PHP commands etc are fine as long as no html is sent to the client before you do your redirect.

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

Another possible solution is to use an iframe to load the next page, one benefit of this is that you can do it all in JS

0人赞添加讨论(0) 举报