Im new to web development, im trying to create a to do list. How to include this javascript function when form submits. I tried doing onClick(addTask(event)) it ignores javascript,page reloads and insert task on my mysql database, how do I make php and javascript work simultaneously? How to integrate JavaScript function with form submission?

php

    <?php
require 'config.php';
if (!isset($_SESSION)) {
    session_start();
};

$loggedIn = isset($_SESSION['useremail']);

$title = '';
$description = '';
$frequency = '';
$status = '';

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $title = $_POST['title'];
    $description = $_POST['description'];
    $status = 'pending';
    $frequency = 'daily';

    if ($loggedIn) {
        $useremail = $_SESSION['useremail'];

        $sql_user = "SELECT id FROM todos_users WHERE email=?";
        $stmt_user = $conn->prepare($sql_user);
        $stmt_user->bind_param('s', $useremail);
        $stmt_user->execute();
        $result_user = $stmt_user->get_result();

        if ($result_user->num_rows > 0) {
            $user = $result_user->fetch_assoc();
            $user_id = $user['id'];

            $sql_insert = "INSERT INTO goals (user_id, title, description1, frequency, status1) 
                           VALUES (?, ?, ?, ?, ?)";
            $stmt_insert = $conn->prepare($sql_insert);
            $stmt_insert->bind_param('issss', $user_id, $title, $description, $frequency, $status);

            if ($stmt_insert->execute()) {
                echo 'New record created successfully!';
            } else {
                echo 'Error: ' . $stmt_insert->error;
            }
        } else {
            echo 'User not found.';
        }
    } else {
        echo 'Not logged in.';
    }
}
?>

html

<div class="my-app">
                <form autocomplete="off" method="POST">
                    <div class="actions">
                        <input type="text" id="input-box" class="messageAdder" name="title" placeholder="Task name">
                    
                        <button type="submit" class="addMessageButton">Add Task</button>
                        
                        <div class="thedescription">
                            <textarea id="description" name="description" rows="5" cols="100" placeholder="Add Description"></textarea>
                        </div>
                        
                    </div>
                </form>

                <table class="my-table" id="list-container">
   
                </table>
            </div>
js
// Add event listener for form submission
function addTask(event){
    event.preventDefault();

    const title = document.getElementById('input-box').value.trim();
    const description = document.getElementById('description').value.trim();

    if (title === '') {
        alert('Please enter a task name');
        return;
    }


    document.getElementById('input-box').value = '';
    document.getElementById('description').value = '';

    const newRow = document.createElement('tr');
    newRow.innerHTML = `
        <td>
            <div class="checker">
                <span><input type="checkbox" class="checkbox">${title}</span>
            </div>
            <div class="actionButton">
                <button class="editBtn"><i class="fas fa-edit" style="color: green;"></i> Edit</button>
                <button class="deleteBtn"><i class="fa fa-trash" style="color: red;"></i> Delete</button>
            </div>
        </td>
    `;
    document.getElementById('list-container').appendChild(newRow);
}