PHP form that loads content based on dropdown option

2 Views

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.

Read More

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.

Post Views: 2

Related posts

Leave a Reply

3 comments

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

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

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