1

I have a <select> element with 3 options within it and also have 3 PHP functions. How can I set it so that when each option is pressed a different PHP function is called? By my understanding, the select options are client side and the functions are server side. Does this mean that AJAX is necessary? Is there a way to do this without AJAX?

<select name="mySelect">
  <option value="filter-oa" disabled="disabled" selected>Filter by Open Access</option>
  <option value="full">Fully Open Access</option>
  <option value="offers">Offers Open Access</option>
  <option value="none">No Open Access</option>
</select>

My 3 functions are: getProOA(), getProFullOA(), and getProNoOA() Example: User selects the "Fully Open Access" option within the drop-down menu and the getProFullOA() function is called and lists the products on the page.

Improve this question
1
  • 6
    You have to use AJAX to do this unless you want to allow the page to reload. If you have never used AJAX before there are tons of tutorials. Commented Jul 19, 2019 at 13:09

2 Answers 2

Reset to default
1 
<select name="mySelect">
  <option value="filter-oa" disabled="disabled" selected>Filter by Open Access</option>
  <option value="full">Fully Open Access</option>
  <option value="offers">Offers Open Access</option>
  <option value="none">No Open Access</option>
</select>

Here try to use a simple ajax call:

   $(select[name='mySelect']).on('change', function(){
        let val = $('select').find('option[value="' + this.value + '"]');
    })
    let dataString = "callFunction=" + val
   $.ajax({
      url: "Your_php_file.php",
      type: POST,
      data: dataString
    }).done(function(result) {
      $('.where-you-want-the-output').html(result);
    });

Just add this to your code!

https://api.jquery.com/jquery.ajax/

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

4 Comments

Sorry, not familiar with Ajax, for this approach do the functions need to be in a separate PHP file?
The functions can be in the same php file e.g. index.php but you just need to $_REQUEST['callFunction'] and use that to call your function
Can I remove the "url:" and " $('.where-you-want-the-output').html(result);" to keep everything on the same page and prevent reloading?
The url is where you want your request to be sent e.g url: 'index.php'. This won't reload the page ajax will go off and call the function in the background and return the data to you in the .done(function(result){}) so if you want to display that data in a div with a class you just .done(function(result){$('.divWithClass').html(result)}) This will output your echo / return that you have in the php function
0

For this to work you'll need to post the form to the server:

<?php

if (!empty($_POST['mySelect'])) {
  // this block is only executed if values are received

  switch ($_POST['mySelect']) {
    case 'filter-oa': 
      getProOA();
      break;

    case 'full':
      getProFullOA();
      break;

    case 'none':
      getProNoOA();
      break;

    case 'offers':
      echo 'some offer';
      break;

    default:
      echo 'ERROR';
  }

  die();
}

?>
<form method="POST">
<select name="mySelect">
  <option value="filter-oa" disabled="disabled" selected>Filter by Open Access</option>
  <option value="full">Fully Open Access</option>
  <option value="offers">Offers Open Access</option>
  <option value="none">No Open Access</option>
</select>  
<button type="submit">
</form>
Improve this answer

4 Comments

Is there any way to do this without a button to submit? Maybe onClick?
Are your functions in javascript or PHP ? because its easy to do in javascript with 'onchange' event
@BenoitF They are PHP functions.
Yes. Still have the select inside a form but you could add a onchange handler on the select: <select onchange="this.form.submit()">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.