<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form with File and TinyMCE</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
	 <script src="https://cdn.tiny.cloud/1/1mb1rf3spybvgrr1u39vhym6nvfqlmkb7qgm9ym9fixbr3n6/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    <script>
        tinymce.init({
            selector: '#myTextarea',
            plugins: 'advlist autolink lists link image charmap print preview anchor',
            toolbar: 'undo redo | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | image link'
        });
    </script>
</head>
<body>

<form id="myForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="file">File:</label>
    <input type="file" id="file" name="file" accept=".jpg, .jpeg, .png" required>

    <label for="myTextarea">Message:</label>
    <textarea id="myTextarea" name="message"></textarea>

    <button type="button" onclick="submitForm()">Submit</button>
</form>

<script>
    function submitForm() {
        // Get form data
        var formData = new FormData($('#myForm')[0]);

        // Make AJAX request
        $.ajax({
            type: 'POST',
            url: 'actions/create_news.php', // Replace with your server-side script URL
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                console.log(response);
                // Handle success (e.g., show a success message)
            },
            error: function(error) {
                console.error(error);
                // Handle error (e.g., show an error message)
            }
        });
    }
</script>

</body>
</html>
