How to make php function according to the drop down menu list selection without a button-CodePudding

Hello I am working with php and I have this drop down menu list code:

<form method="POST" >
    <select name="users" id="users">
        <option <?php if(isset($_POST['users']) && $_POST['users'] == '2') echo "selected='selected'";  ?> value="2">User one</option>
        <option <?php if(isset($_POST['users']) && $_POST['users'] == '3') echo "selected='selected'";  ?> value="3">User Two</option>
    </select>
    <input type="submit"   name="refresh" value="Refresh">
</form>

and then there is this php code that starts as follows:

<?php

if(isset($_POST['refresh'])){
        ....
?>

Now I want to remove the button from the html and want to make the php code execute automatically when selected from the drop-down list menu. I tried something with javascript but wasnt what I needed it was just printing the value as an alert.

this is the code of javascript i tried

var x = document.getElementById('users').selectedIndex; 
var text = document.getElementsByTagName("option")[x].text;//its a text 
document.getElementById("pr").innerHTML = text;

How do i make it to submit the form?

Tried this other javascript but this makes my page stuck on refresh I put this onchange="fuksion()" on <form>

 <script>
      function funksion() {
      document.getElementById("user").submit();
       }
      funksion();
     </script>

CodePudding user response：

Add an eventlistener (change) to submit the form:

<form action="" method="POST">
  <select name="users" id="users">
    <option <?php if (isset($_POST['users']) && $_POST['users'] == '2') echo "selected";  ?> value="2">User one</option>
    <option <?php if (isset($_POST['users']) && $_POST['users'] == '3') echo "selected";  ?> value="3">User Two</option>
  </select>
</form>

<script>
  let usersSelect = document.getElementById('users');
  users.addEventListener('change', function() {
    this.form.submit();
  })
</script>

<?php
if (isset($_POST['users'])) {
  echo "You selected " . $_POST['users'];
}
?>

On first load of the page the first option will be selected, so the change event will only trigger if you select the second option. To circumvent this, add an "empty" option:

<select name="users" id="users">
  <option value="">-- choose one --</option>
  <option <?php if (isset($_POST['users']) && $_POST['users'] == '2') echo "selected";  ?> value="2">User one</option>
  <option <?php if (isset($_POST['users']) && $_POST['users'] == '3') echo "selected";  ?> value="3">User Two</option>
</select>

CodePudding user response：

use this code you will get value on select

form.php page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Option Value</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("select.value").change(function(){
        var selectedValue = $(this).children("option:selected").val();
        //alert("You have selected  "   selectedValue);
        
        $.ajax({
        type: "POST",
        url: "query-process.php",
        data: { type: selectedValue }, // serializes the form's elements.
        success: function(data)
        {
          alert(data); // show response from the php script.
        }
    });
    });
});
</script>
</head> 
<body>
    <form>
        <label>Select value:</label>
        <select >
             <option <?php if(isset($_POST['users']) && $_POST['users'] == '2') echo "selected='selected'";  ?> value="2">User one</option>
        <option <?php if(isset($_POST['users']) && $_POST['users'] == '3') echo "selected='selected'";  ?> value="3">User Two</option>
        </select>
    </form>
</body>
</html>

query-process.php -->> in this page you will get value by this

print_r($_POST['type']);

after getting the value, you have to run your SQL query to submit the form to your database and also you can run the query for searching value in the database