Missing value in form

Support
, ,
#1

Hi I am new to Netlify

I am building a personal portfolio page in Gatsby.

I have made a form that is submitted with JS. I had some problems getting it up and running initially, but now it seems to work. I have a static HTML file included in my project for Netlify to recognize the form (the form is inside a modal in my page and isn’t included in HTML file otherwise in my build).

However. I got one formfield that always returns empty. I have included a hidden field to store the language the form was submitted in (I need to be able to set up an auto reply in the correct language later on). I use a javascript function to fill out the formfield, and it is filled out correctly. However, it always returns empty.

My project is located at https://larsejaas.netlify.app/ - the contactform is found when you click on the “envelope icon” in the footer.

The form is named “skrivTilMig”.

Initially I had the formfield that returns empty registered with “type” = “hidden”, but have changed this to “text” and now just hide the field with CSS - but it still returns empty? I have changed the HTML form field to text also.

#2

Hello,

The source indicates that the field value is not actually set, but you specifically mention that you’ve verified the opposite. How exactly did you verify it?

A common mistake when working with these javascript frameworks is thinking that you updated the value, but actually didn’t, often because you’re not mutating the value correctly and the framework isn’t actually, not fully, picking up on the change.

#3

Yeah, I was probably a bit unclear about that :sweat_smile:

When I fill out the form in the browser (live site) I can got to developer tools and make the formfield visible. Here the field is showing the correct input (‘da’ or ‘en’ as per the language settings). As I understand the post method is parsing all fields :thinking: Or at least I was under the impression it did…

#4

Ohh, well. Looks like I might have done something wrong regarding React Hooks and state. I have made an alert once the form is submitted in my test environment and the input is undefined. Guess I have to do some rethinking…

#5

Allright. I finally found a solution.

For future reference - this is how i solved the problem.

The react form was using hooks.

I had this function handling state of all inputfields:

const handleChange = (e) => {
setState({ …state, [e.target.name]: e.target.value })
}

And then on submit ran this function:

  const handleSubmit = (e) => {
e.preventDefault()
const form = e.target
fetch('/', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: encode({
    'form-name': form.getAttribute('name'),
    ...state,
  }),
})
  .then(() => navigate(form.getAttribute('action')),closeModal())
  .catch((error) => alert(error))

}

BUT the hidden field was never updated, so it wasn’t included in the states object!

I made a small “workaround” with the useEffect hook:
useEffect(() => {
setState({ …state, language: pageLanguage })
},[pageLanguage])

“language” is the name of the hidden inputfield and pageLanguage is a variable taken from the document.root “lang” attribute.

This is a bit “hacky” but works well.

Problem here is that the handleSubmit function is actually fetching all the state values and not actual values from inputfields. Oh well!

1 Like