Submitting Forms with Turbolinks ( tested with Laravel );

about.md

Submitting forms with Turbolinks has always been pain in the ass, especially in a situation when the server responds with validation errors.

This snippet aims to solve the problem.

Resources:

• serialize() : https://vanillajstoolkit.com/helpers/serialize/

submitForm.js

async submitForm() {
                let $form = document.getElementById('form');
                let formData = serialize($form); // Check resources for serialize() function

                Turbolinks.controller.adapter.showProgressBarAfterDelay();

                try {
                    let response = await fetch($form.getAttribute('action'), {
                        method: 'POST',
                        headers: {
                            'Accept': 'text/html, application/xhtml+xml',
                            'Turbolinks-Referrer': `${window.location.href}`,
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        body: formData
                    });

                    let responseHtml = await response.text();
                    let location = response.headers.get('Turbolinks-Location');
                    let snapshot = Turbolinks.Snapshot.wrap(responseHtml);

                    if (!location) {
                        location = window.location.href;
                    }

                    Turbolinks.controller.cache.put(location, snapshot);
                    Turbolinks.visit(location, {action: 'restore'});

                } catch (error) {
                    console.log(error)
                } finally {
                    Turbolinks.controller.adapter.hideProgressBar();
                }
            }