Load existing form html into vue component and submit form with fetch-CodePudding

I want to load an existing form into a vue component and send the form data back to the form. The cms has no "headless" forms api and I don't want to convert given form elements into own objects.

So the idea is:

Load existing form html and render it in the component
Prevent default form submit and handle it by sending the form data back to the form url

Setup:

setup: (props) => {
        const formElement = ref<HTMLFormElement>(null);
        const formConfiguration = ref(null);
        const handleSubmit = (e) => {
            e.preventDefault();
            const formData = new FormData(e.target);
            console.log(formData); // this delivers an empty object FormData {}
        }
        // load the form from existing page and assign to formElement
        const loadForm = async() => await fetch(props.formUrl)
            .then(response => response.text())
            .then((response) => {
                const parser = new DOMParser();
                const formHtml = parser.parseFromString(response, 'text/html');
                const theForm = formHtml.querySelector('form');
                if (theForm instanceof HTMLFormElement) {
                    formConfiguration.value = {
                        enctype: theForm.enctype,
                        method: theForm.method,
                        id: theForm.id,
                        action: theForm.action
                    };
                    formElement.value = theForm.innerHTML;
                }
            })
        onBeforeMount(loadForm);
        return {
            formElement,
            loadForm,
            handleSubmit,
            formConfiguration
        }
    }

Template:

<template>
    <div v-if="formElement && formConfiguration">
        <form v-html="formElement"
              :action="formConfiguration.action"
              @submit="handleSubmit"
              :method="formConfiguration.method"
              enctype="multipart/form-data"
        ></form>
    </div>
</template>

On submitting, formData outputs an empty object in:

const handleSubmit = (e) => {
            e.preventDefault();
            const formData = new FormData(e.target);
            console.log(formData); // this delivers an empty object FormData {}
        }

So I guess, the form fields which have been placed by theForm.innerHTML are unknown to my Vue component?

I do not like the way of passing the html form with v-html, but I currently have no other idea without preparsing the form html and create own form fields (which would be massive).

Does anyone have a better solution how to load and send existing forms?

CodePudding user response：

Stupid mistake by myself:

console.log(formData)

does not output any data.

const formData = new FormData(e.target);
for (var key of formData.entries()) {
  console.log(key[0]   ', '   key[1])
}

CodePudding user response：

A simple way to log all entries in a FormData instance is by spreading it in console.log():

const formData = new FormData()

formData.set('a', true)
formData.set('b', false)
formData.set('c', new Date())
          //