List of HTTP Status Codes

List of HTTP status codes

Make Webflow Form Submission using jQuery Ajax Method

This code is generated using ChatGPT

$(document).ready(function() {
    // When the form is submitted
    $('[fs-form]').submit(function(e) {
        e.preventDefault();

        var formEl = $(this); // caching the form in a variable
        var formSubmit = $(this).find('input[type=submit]');
        var actionUrl = $(this).attr("action");
        var formMethod = $(this).attr("method");
        var formSuccess = $(this).siblings('.w-form-done');
        var formError = $(this).siblings('.w-form-fail');
        var myData = $(this).serialize();

        $(formSubmit).val("Please wait....");

        $.ajax({
            url: actionUrl,
            type: formMethod,
            data: myData,
            complete: function(jqXHR) {
                if (jqXHR.status === 200) {
                    formEl.hide(); //Hide the form
                    formSuccess.text(jqXHR.responseText); //Set the success message to the response text
                    formSuccess.show(); //Show success message
                    console.log('Response data:', jqXHR.responseText);
                    console.log('Form submission successful');
                } else {
                    formError.show();
                    formSubmit.val("Submit");
                    if(jqXHR.status === 500) {
                        formError.text("Internal server error. Please try again later.");
                    } else if(jqXHR.status === 404) {
                        formError.text("Resource not found. Please check the URL.");
                    } else {
                        formError.text("An error occurred. Please try again.");
                    }
                    console.log('Form submission failed: ' + jqXHR.status);
                }
            },
        });
    });
});

Make Webflow Form Submission using Fetch API Method

This code is generated using ChatGPT

$(document).ready(function() {
    $('[fs-form]').submit(function(e) {
        e.preventDefault();

        var formEl = $(this); // caching the form in a variable
        var formSubmit = $(this).find('input[type=submit]');
        var actionUrl = $(this).attr("action");
        var formMethod = $(this).attr("method");
        var formSuccess = $(this).siblings('.w-form-done');
        var formError = $(this).siblings('.w-form-fail');
        var myData = $(this).serialize();

        $(formSubmit).val("Please wait....");

        fetch(actionUrl, {
            method: formMethod,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
            },
            body: myData
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.text(); // use text() if your server response is text
        })
        .then(data => {
            formEl.hide(); //Hide the form
            formSuccess.text(data); //Set the success message to the response text
            formSuccess.show(); //Show success message
            console.log('Response data:', data);
            console.log('Form submission successful');
        })
        .catch(error => {
            formError.show();
            formSubmit.val("Submit");
            if (error.message.includes('500')) {
                formError.text("Internal server error. Please try again later.");
            } else if (error.message.includes('404')) {
                formError.text("Resource not found. Please check the URL.");
            } else {
                formError.text("An error occurred. Please try again.");
            }
            console.log('Form submission failed: ' + error);
        });
    });
});

Success (webflow.io)