Empty Form Submission

Support
1

I hate to do this (share the whole code), but I feel like I have no other choice. I have been banging my head against the wall for the past two days. It is one issue after another. Currently, I am soooo close to getting Forms working.

For some reason an empty field is submitted. I can’t find the reason, it is really hard to debug.

<template>
          <form
          name="add-subscriber"
          id="myForm"
          method="post"
          data-netlify="true"
          data-netlify-honeypot="bot-field"
          @submit.prevent="handleFormSubmit">
            <input type="hidden" name="form-name" value="add-subscriber" />
            <input type="email" name="email" v-model="userEmail">
            <button type="submit" name="button">Subscribe</button>
          </form>
</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            form: {
                userEmail: "",
            },
        }
    },
    
    methods: {
        encode(data) {  
            return Object.keys(data)
                .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`)
                .join("&");
            },

        handleFormSubmit(e) {
            const axiosConfig = {
                header: { "Content-Type": "application/x-www-form-urlencoded" }
            };

            axios.post(
                location.href, 
                this.encode({
                    'form-name': e.target.getAttribute("name"),
                    ...this.userEmail,
                }),
                axiosConfig
            )
            .then(data => console.log(data))
            .catch(error => console.log(error))
            .then(document.getElementById("myForm").innerHTML = `<div>Almost there! Check your inbox for a confirmation e-mail.</div>`)
        }
    }
}
</script>

If there is anything that comes to mind or jumps at you, I would really appreciate your help! Thanks a ton in advance.

P.S. I used the guides from Netlify and CSS-Tricks

Best,
Rasul

2

Solved it. I kind gentleman on StackOverflow, suggested to declare userEmail in my data like so:

data() {
        return {
            formData: {
                userEmail: null,
            },
        }
    },

Worked like a charm!

Whole block:

<template>
          <form
          name="add-subscriber"
          id="myForm"
          method="post"
          data-netlify="true"
          data-netlify-honeypot="bot-field"
          enctype="application/x-www-form-urlencoded"
          @submit.prevent="handleFormSubmit">
            <input type="hidden" name="form-name" value="add-subscriber" />
            <input type="email" name="userEmail" v-model="formData.userEmail">
            <button type="submit" name="button">Subscribe</button>
          </form>
 </template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            formData: {
                userEmail: null,
            },
        }
    },
    
    methods: {
        encode(data) {  
            const formData = new FormData();
            
            for (const key of Object.keys(data)) {
                formData.append(key, data[key]);
            }
            
            return formData;
        },

        handleFormSubmit(e) {
            const axiosConfig = {
                header: { "Content-Type": "application/x-www-form-urlencoded" }
            };

            axios.post(
                location.href, 
                this.encode({
                    'form-name': e.target.getAttribute("name"),
                    ...this.formData,
                }),
                axiosConfig
            )
            .then(data => console.log(data))
            .catch(error => console.log(error))
            .then(document.getElementById("myForm").innerHTML = `
            <div>
                Thank you! I received your submission.
            </div>
            `)
        }
    }
}
</script>
3

fantastic. thanks for sharing what worked for you!