How can I save a DropDown into a Database with AJAX

Question

I've looked really hard on this but I can't get my head around AJAX working with PHP.

This is what I have and when a user clicks on the dropdown I would like it to save into my database

<select>
  <?php $taskStatus = "SELECT * FROM task_status WHERE used = 1 ORDER BY id ASC ";
   $taskresults = $conn->query($taskStatus) or die(mysqli_error($conn));
   while($taskStatusRow = mysqli_fetch_assoc($taskresults)) {
     echo " <option  value= ". $taskStatusRow['name'] ." >". $taskStatusRow['name'] ." </option>";
   }
  ?>
</select>

And this is the query i'd like to run:

INSERT INTO snagging (taskstatus, updated_at) 
WHERE ID = 1234 
VALUES taskStatusRow['name'], $now);

Answer 1

I'll give you a overall flow of AJAX here. I tried to provide comments so as to show the control flow.

<select id="selectOption">  //******* Assign an ID
    <?php $taskStatus = "SELECT * FROM task_status WHERE used = 1 ORDER BY id ASC ";
    $taskresults = $conn->query($taskStatus) or die(mysqli_error($conn));
    while($taskStatusRow = mysqli_fetch_assoc($taskresults)) {

        echo " <option  value= ". $taskStatusRow['name'] ." >". $taskStatusRow['name'] ." </option>";

    }
    ?>
</select>

jQuery + AJAX

$(document).ready(function() {
    $("#selectOption").change(function(){ //** on selecting an option based on ID you assigned
        var optionVal = $("#selectOption option:selected").val(); //** get the selected option's value

        $.ajax({
            type: "POST", //**how data is send
            url: "MYPROCESSPAGE.php", //** where to send the option data so that it can be saved in DB
            data: {optionVal: optionVal }, //** send the selected option's value to above page
            dataType: "json",
            success: function(data){
                //** what should do after value is saved to DB and returned from above URL page.
            }
        });
    }); 
});

Inside your MYPROCESSPAGE.php , you can access the data passed via AJAX like:

<?php

$selectedOptionVal = $_POST['optionVal'];

//DB CONNECTION STEPS
.
.
.
// You are trying to "UPDATE" a table data based on some ID and not inserting. Included both operations

// If you are INSERTING A new table entry, use below code.
//INSERT INTO snagging (taskstatus, updated_at) VALUES ('$selectedOptionVal', 'Now()');

// If you are UPDATING an existing table entry, use below code.
//UPDATE snagging SET taskstatus = '$selectedOptionVal', updated_at = 'Now()' WHERE ID = 1234;

?>

Hope it's helpful.