0

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

Improve this question
14
  • 1
    replace option[name="status"] with select[name="status"] option Commented Feb 16, 2018 at 15:24
  • You should probably also listen to the change event instead of the click event to avoid running unnecessary code and making unnecessary requests. Commented Feb 16, 2018 at 15:25
  • @jeroen there are no unnecesary requests of you listen to click of the options. But it is better (usually done) with change event of select anyway. Commented Feb 16, 2018 at 15:27
  • can you make an alert alert("clickListener works!"); at the very beginning of your click listener function and see if the alert shows? Commented Feb 16, 2018 at 15:46
  • @Cashbee Yes, I got the alert. Commented Feb 16, 2018 at 15:48

3 Answers 3

Reset to default
3

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/

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

9 Comments

with your code it listens to clicks on the select itself. might I suggest changing $('select[name="status"]') to $('select[name="status"] option'). (But when the change event is used, listen to the select, not the option.)
Thanks for your advice.
@Cashbee Should I use $('select[name="status"] option')?
@JohnZ yes try it, but I fear it will not work. It is essentially the same as $('select[name="status"]').change(..) which you said in another comment does not work. Giving it a try is never wrong though.
@Cashbee Yes it didn't work, thanks for the suggestion tho
|
1

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() {
Improve this answer

6 Comments

Hm I did try this one but I still get the same result, thank you for pointing this out tho.
@JohnZ What's happen in your network panel of your console ? Any trace, any error ?
Nothing. The value of the dropdown just change, that's it.
@JohnZ Could you put a console.log(status); or alert(status) after var status = $(this).val();?
@JohnZ I guess you have another javascript error. No error in your console (F12) ?
|
0

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

Improve this answer

1 Comment

Thank you so much!

Your Answer

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