Real-Time AJAX Update for CloudPages

<form id="myForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <button type="submit">Submit</button>
</form>
<div id="response"></div>
<div id="error"></div>

<script>
    document.getElementById('myForm').addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent the form from submitting the traditional way

        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'YOUR_CLOUDPAGE_URL', true); // Replace with your CloudPage URL
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    document.getElementById('response').innerHTML = xhr.responseText;
                    document.getElementById('error').innerHTML = ''; // Clear any previous error messages
                } else {
                    document.getElementById('error').innerHTML = 'AJAX Error: ' + xhr.statusText;
                }
            }
        };

        var formData = new FormData(document.getElementById('myForm'));
        var encodedData = new URLSearchParams(formData).toString();
        xhr.send(encodedData);
    });
</script>

%%[
    VAR @name, @response
    SET @name = RequestParameter("name")
    SET @response = CONCAT("Hello, ", @name, "! Your form has been submitted successfully.")
]%%
%%=v(@response)=%%