mercredi 18 octobre 2023

Ajax to make line-through when checkbox checked with php&mysql

Trying to learn some php and mysql, so I'm working on a todo list where I want the todo tasks get a line-through when a checkbox that each task has is checked and removed again if unchecked.

like i have here:

enter image description here

I have made so i can make the line-through from a variable in database like this:

<input class="form-check-input form-check-input-todolist flex-shrink-0 my-1 me-2 form-check-input-undefined" type="checkbox" data-event-propagation-prevent="data-event-propagation-prevent" id="checkbox-todo-<?= $todoTask_Data['task_id'] ?>" <?php if($todoTask_Data['task_checked'] == 'true') {echo 'checked';} ; ?> />

Now I need to find out how i add the "true" variable to the task_checked column in mysqli when the checkboxes are clicked.

Not really worked with ajax/js much before, so its been very confusing figuring out how to do this. But I think i got the idea now, but still cant get this to work.

This is the script I got so fare

  $(document).ready(function() {
$('.checkbox-todo').on('change', function() {
  if (this.checked) {
    var checkboxID = $(this).attr('id');


    $.ajax({
      url: "update_TodoTask.php",
      method: "POST",
      data: { checkboxID: checkboxID },
      success: function(response) {

      }
    });
  }
});
});

And inside update_TodoTask.php i got something like this:

if ($_SERVER["REQUEST_METHOD"] === "POST" && isset($_POST['checkboxID'])) {
 $checkboxID = $_POST['checkboxID'];


header('Location: test.php');
}

Here is the html code: https://pastecode.io/s/zw4thpoe

But I don't even think it is communication with update_TodoTask.php when pressed. should it not be triggering the header location when i press a checkbox?

I'm not sure im telling the ajax script which checkbox in the todo list is pressed correctly?

Can anyone tell me what I'm doing wrong here?




Aucun commentaire:

Enregistrer un commentaire