Updating table values using dropdown without using a submit button - php

Question

I'm trying to update the database using a dropdown list without using a submit button.
Here's my dropdown:
<td>
<label for=""></label>
<select style="font-family: Questrial;" name="status" required>
<option disabled selected hidden>Select Status</option>
<option value="In Progress">In Progress</option>
<option value="Closed: Cancelled">Closed: Cancelled</option>
<option value="Closed: Solved">Closed: Solved</option>
</select>
</td>
Here's the script:
<script>
$(document).ready(function() {
$('option[name="status"]').click(function() {
var status = $(this).val();
$.ajax({
url: "update2.php",
method: "POST",
data: {
status: status
},
success: function(data) {
$('#result').html(data);
}
});
});
});
</script>
And here's update2.php:
<?php
//Insert Data
$hostname = "localhost";
$username = "root";
$password = "";
$databasename = "companydb";
try
{
$conn = new PDO("mysql:host=$hostname;dbname=$databasename",$username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
if(isset($_POST["status"]))
{
$query = "INSERT INTO tickets(status) VALUES (:status)";
$statement = $conn->prepare($query);
$statement->execute(
array('status' => $_POST["status"])
);
$count = $statement->rowCount();
if($count > 0)
{
echo "Data Inserted Successfully..!";
}
else
{
echo "Data Insertion Failed";
}
}
}
catch(PDOException $error)
{
echo $error->getMessage();
}
?>
Basically what I want to happen is to update the table values when I make a selection from the dropdown list.
Currently, nothing happens when I make a selection. (No page reload, No error message, just nothing)
Am I doing something wrong here?
Also here's my table schema:
table schema

Answer 1

You are targeting the wrong element
$('option[name="status"]') should be $('select[name="status"] option'
I suggest you to use id, they are more clear and faster.
In addition you will also be interested with the change event
https://api.jquery.com/change/

Answer 2

The selector should be select and the event should be change(). Try this :
$('select[name="status"]').change(function() {
instead of :
$('option[name="status"]').click(function() {

Answer 3

1) change $('option[name="status"]').click( to $('select[name="status"]').change(
the name "status" is an attribute of the select, not the options.
2) make sure you have an element with the id "result", or else the ajax success handler will not insert the received data/string anywhere.
These changes should make your code work.
I recommend adding an error handler to every ajax call you do. Also try to prevent your php files that are called by ajax methods to have cases where nothing is returned / echoed.
if(isset($_POST["status"]))
{
$query = "INSERT INTO tickets(status) VALUES (:status)";
$statement = $conn->prepare($query);
$statement->execute(array('status' => $_POST["status"]));
$count = $statement->rowCount();
if($count > 0)
{
echo "Data Inserted Successfully..!";
}
else
{
echo "Data Insertion Failed";
}
}
// ! add else statement
else
{
echo "unknown index: 'status'";
}
Also an interesting read about ajax error handling: setting response codes in PHP