Execute function on dropdown menu change in PHP

Question

Here is a little code snippet that works somewhat well but not quite what I am trying to achieve:

<html>
<head>
</head>
<body>
<form method='post'>
    Display
    <select name="displayOptions" onchange="this.form.submit()">
        <option selected value="all">all</option>
        <option value="open">open</option>
        <option value="reserved">reserved</option>
        <option value="blocked">blocked</option>
    </select> computers
</form>

<?php
    if(isset($_POST["displayOptions"])){
        if ($_POST["displayOptions"]=='all')
           allFunction();
        if ($_POST["displayOptions"]=='open')
           openFunction();
        etc...
   }
?>
</body>
</html>

As soon as the user chooses a dropdown selection I want the action to take place. I also want the default action to be "all" and for that to happen as soon as the form is loaded. The code snippet above works well with the exception of 2 things.

'all' is selected by default (Working As Intended), however allFunction() doesn't run. Even if you select another option and then select 'all' again, 'all' still doesn't work. I would like the allFunction to run as soon as this form loads up with 'all' selected and, of course, to be able to choose 'all' again later.
Whenever a different selection is selected, it loads the correct function (WAI), however the dropdown turns back to all. I know why it does this (becuase the page is being reloaded and 'all' is the default selected value), but I'd like it to stay on the selected option!

As I typed this out I have a feeling I can tackle #2 with a $_SESSION variable but I am still stumped why the first option in the select dropdown is not registering.

You'd probably benefit more by using ajax. Look for that and samples from tutorials. There's a lot of stuff out there, believe me. I wouldn't steer you wrong. — Funk Forty Niner
– Funk Forty Niner, Commented Aug 5, 2020 at 1:15
If this really stems from possible errors, check your console and enable error reporting. — Funk Forty Niner
– Funk Forty Niner, Commented Aug 5, 2020 at 1:16

Will · Accepted Answer · 2020-08-05 01:35:11Z

1

As pointed out by Funk, you may want to look into ajax calls instead to avoid reloading the page when selecting something (which is arguably a poor user experience), but if you insist on using the same structure, you may do this:

<?php
    // Set the option selected ("all" by default)
    $option_selected = !empty($_POST["displayOptions"])? $_POST["displayOptions"] : "all";
?>

...

<select name="displayOptions" onchange="this.form.submit()">
    <option value="all" <?php if ($option_selected == "all") echo "selected" ?>>all</option>
    <option value="open" <?php if ($option_selected == "open") echo "selected" ?>>open</option>
    <option value="reserved" <?php if ($option_selected == "reserved") echo "selected" ?>>reserved</option>
    <option value="blocked" <?php if ($option_selected == "blocked") echo "selected" ?>>blocked</option>
</select>

...

<?php
    if ($option_selected == "all")
       allFunction();
    else if ($option_selected == "open")
       openFunction();
    etc...
?>

I haven't tested it but it should work fine.

answered Aug 5, 2020 at 1:35

Will

1,2031 gold badge10 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

19 Comments

cursesNOOB Over a year ago

This works beautifully! I am new to PHP and I was doing EVERYTHING with forms and if(isset ($_POST) blocks. I didn't realize you could do it this way. A huge epiphany just occurred in my brain, thank you so much!

Will Over a year ago

Glad to hear that. Remember that you can do plenty on the client side with simple JS. For instance, if your functions above only display HTML with little logic, you can load all elements at once and hide them with display:none, and when your user selects something, show the appropriate element(s) with display:block to avoid reloading the whole page

cursesNOOB Over a year ago

Trying to implement this into my project and its not working as I expected :( Let me try to illustrate my flow: after login page, users click login, it checks db to make sure username is valid, stores username in a SESSION var, then start() function gets called. My login page still displays at the top, this is how i wanted it. Within the start function, i display some 'start text', and this darn dropdown menu. The default 'all' selection is WAI and runs my allFunction (which displays more text underneath the dropdown). When i select 'open', the form disappears along with all my 'start text'

cursesNOOB Over a year ago

All I want this dropdown to do is display something different underneath depending on what is selected, but this seems to have reloaded my whole page without my start() func (which is where this dropdown lives)

Will Over a year ago

As long as you keep onchange="this.form.submit()" the page will reload on user selection.

|

Collectives™ on Stack Overflow

Execute function on dropdown menu change in PHP

1 Answer 1

19 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

19 Comments

Your Answer

Sign up or log in

Post as a guest

Related