This is my form:
<template>
<div class="flex flex-col mt-[5rem] gap-4 p-4 items-center max-w-4xl mx-auto">
<form id="inquiry" class="flex flex-col gap-4 w-full" @submit.prevent="submitHandler">
<label for="name">Full Name</label>
<input class="input" type="text" name="name" v-model="formData.name" @input="saveFormData">
<label for="email">Email Address</label>
<input class="input" type="email" name="email" v-model="formData.email" @input="saveFormData">
<label for="message">Your Message</label>
<textarea class="input" name="message" id="message" cols="30" rows="10" v-model="formData.message"
@input="saveFormData"></textarea>
<h2 v-if="message">{{ message }}</h2>
<button type="submit" class="btn" :disabled="message === 'Loading...'">Submit</button>
</form>
</div>
</template>
<script setup lang="ts">
const message = ref('');
const formData = reactive({
name: '',
email: '',
message: ''
});
const loadFormData = () => {
const savedData = localStorage.getItem('inquiryFormData');
if (savedData) {
const parsedData = JSON.parse(savedData);
formData.name = parsedData.name || '';
formData.email = parsedData.email || '';
formData.message = parsedData.message || '';
}
};
const saveFormData = () => {
localStorage.setItem('inquiryFormData', JSON.stringify(formData));
};
const clearFormData = () => {
localStorage.removeItem('inquiryFormData');
};
onMounted(() => {
loadFormData();
});
const submitHandler = async () => {
if (message.value === 'Loading...') return;
message.value = 'Loading...';
const { data: res } = await useFetch("***", {
method: "POST",
query: {
websiteId: "***",
formGroupId: "***"
},
body: formData
});
const responseMessage = (res.value as any).message;
message.value = responseMessage === "success"
? "Thank you! We will be in touch shortly."
: "Oops, something went wrong. Please try again later.";
formData.name = '';
formData.email = '';
formData.message = '';
clearFormData();
};
</script>
After submitting the form, a second submission occurs with empty fields. If I don't clear the fields, every change triggers an additional submission. The handler appears to be monitoring field changes. While only called once based on log information, the data is sent multiple times.