Untitled

<?php include 'header.php' ?>
<!DOCTYPE html>
<html>
<head>
    <title>Makale Oluşturma</title>
</head>
<body>
    <form method="post" action="">
        <label for="topic">Konu:</label>
        <input type="text" name="topic" id="topic" required>
        <button type="submit">Makale Oluştur</button>
    </form>
    
    <div id="result">
        <!-- Makale sonucunun gösterileceği bölüm -->
    </div>
 
    <script>
        // Formu AJAX ile göndermek ve sonucu ekrana yazdırmak için JavaScript kodu
        var form = document.querySelector('form');
        form.addEventListener('submit', function(event) {
            event.preventDefault();

            var topicInput = document.getElementById('topic');
            var topic = topicInput.value.trim();

            if (topic === '') {
                var alertDiv = document.createElement('div');
                alertDiv.className = 'alert alert-danger alert-dismissible';
                alertDiv.setAttribute('role', 'alert');

                var closeButton = document.createElement('button');
                closeButton.className = 'btn-close';
                closeButton.setAttribute('type', 'button');
                closeButton.setAttribute('data-bs-dismiss', 'alert');
                closeButton.setAttribute('aria-label', 'Close');

                var alertMessage = document.createElement('div');
                alertMessage.className = 'alert-message';
                alertMessage.innerHTML = '<strong>Hata!</strong> Lütfen bir konu girin.';

                alertDiv.appendChild(closeButton);
                alertDiv.appendChild(alertMessage);

                var inputText = document.getElementById('topic');
                inputText.parentNode.insertBefore(alertDiv, inputText.nextSibling);

                return;
            }

            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var resultDiv = document.getElementById('result');
                    resultDiv.innerHTML = '';

                    var inputText = document.createElement('input');
                    inputText.type = 'text';
                    inputText.className = 'form-control';
                    inputText.setAttribute('readonly', 'readonly');
                    inputText.value = xhr.responseText;

                    resultDiv.appendChild(inputText);

                    var successDiv = document.createElement('div');
                    successDiv.className = 'alert alert-success alert-dismissible';
                    successDiv.setAttribute('role', 'alert');

                    var closeButton = document.createElement('button');
                    closeButton.className = 'btn-close';
                    closeButton.setAttribute('type', 'button');
                    closeButton.setAttribute('data-bs-dismiss', 'alert');
                    closeButton.setAttribute('aria-label', 'Close');

                    var successMessage = document.createElement('div');
                    successMessage.className = 'alert-message';
                    successMessage.innerHTML = '<strong>Tebrikler!</strong> Makale oluşturma başarılı.';

                    successDiv.appendChild(closeButton);
                    successDiv.appendChild(successMessage);

                    var inputTextDiv = inputText.parentNode;
                    inputTextDiv.insertBefore(successDiv, inputTextDiv.firstChild);

                    topicInput.value = '';
                }
            };
            xhr.open('POST', 'aaa.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send('topic=' + encodeURIComponent(topic));
        });
    </script>
</body>
</html>
Editor is loading...