2

Referring to this example PHP form that loads content based on dropdown option

Solution 1, PHP

1) index 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

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

I just want to do It without the need of clicking on submit. I want to achieve this just by clicking on the dropdown list value then checks if it's equal to the value in the Php file if yes show the page.

Thanks a lot.

Community
  • 1
  • 1
Hisham
  • 45
  • 1
  • 4
  • Just do it via. jQuery's change-function and Ajax. You can detect if the users selected the option and send it via. Ajax to the backend. The PHP script should return a reponse in JSON and the front-end can handle it. – nullexception Feb 10 '16 at 13:22
  • I assume you absolutely *must* do this in PHP for whatever reason, but it would be a much better solution to examine the form & show/hide content entirely client-side using JavaScript, without needing to send requests to the server to run your PHP code. If you're actually *not* explicitly restricted to doing this with PHP, I highly discourage you from doing so. – JMTyler Feb 10 '16 at 14:52

2 Answers2

4

Write html as follow:

<select form="theForm" name="selectedPage" onchange="this.form.submit()">
  <option value="page_1">Page 1</option>
  <option value="page_2">Page 2</option>
</select>

This will submit form when you select option.

  • This is much better than the other answer. The code is simpler, and also one should not have to implement multiple php files for each option in the list... that's a maintainability nightmare. – JMTyler Feb 10 '16 at 14:50
3

This will cause a "redirect" when you select an option in the dropdown:

Add an onchange event to the select to change the current browser location.

Change the select option values to the URLs for the pages.

(You might then drop the PHP header directions in loadPage.php. Not needed anymore.)

<select form="theForm" name="selectedPage" 

        onchange="if (this.value) window.location.href=this.value">

  <option value="page_1.php">Page 1</option>
  <option value="page_2.php">Page 2</option>
</select>

Answers for the questions asked by Jay Blanchard in the comment section:

Can this be done without inline JavaScript (for ease of maintenance and reuse-ability)?

Sure, thats possible, too. For instance, with jQuery: 

$('#SelectId').change(function() { 
    //alert( this.value ); // or $(this).val()
    window.location.href = 'http://' + this.value;
});

See http://api.jquery.com/change

Or you may bind with .on('change')

$('#SelectId').on('change', function() {
    //alert( this.value ); // or $(this).val()
    window.location.href = 'http://' + this.value;
});

Can you do it without jQuery?

Sure, thats possible, too. You might select the element by using document.getElementById() and bind the event handling with addEventListener.

window.onload = function() { 
    var select = document.getElementById('SelectId');
    var handler = function() {
      if(select.value) {
            window.location.href = 'http://' + select.value;
      }
    };
    select.addEventListener('change', handler, false);
};
Jens A. Koch
  • 39,862
  • 13
  • 113
  • 141