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" class="fadeIn fourth" 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>
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>
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 class="value">
<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