Html form - inputs not received - creating form inputs with map

[calag4n]

Hi there,

Netlify form don’t receive some inputs’s values that are:

• created from an Array.map()
• functionally filled

See code below:

<form
  method='post'
  action='#'
  name='booking'
  className='booking'
  data-netlify='true'
  data-netlify-honeypot='bot-field'
>
<input type='hidden' name='form-name' value='booking' />

{dateToBook.map((date, id) => (
  <>
    <label
      key={id}
      htmlFor={`date-${id}`}
    >{`date-${id}`}</label>

    <input
      name={`date-${id}`}
      id={`date-${id}`}
      type='text'
      value={date}
      key={id}
      disabled={false}
      className='field date'
    />
</>
))}

{/* Some others fields that are correctly receiving by netlify */}

</form>

if someone have solution…
Coded with GatsbyJS

[perry]

hi there, did you work through these posts already?

[Support Guide] Form problems, form debugging, 404 when submitting

Last reviewed August 2023 Please give these debugging tips a try before making a new post. If none of the suggestions work, please include the information that we request at the end of this guide in the new post that you create. Thank you! Why use Forms? Forms are one of the most useful parts of modern websites because they allow us to capture input from our visitors. There are many ways to use forms: contact forms, such as contact forms and sign-up forms. Seeing as there are many types of fo…

[Support Guide] My form renders with JavaScript but won't work properly

Last reviewed: August 2023 Fear not, there’s just a couple of extra things to make sure you have that will probably get things working! The most frequent cause of problems with JS forms is that you (or your static site generator) need to create an HTML version of your form to match your JavaScript version. Some frameworks like gatsby/react may do this automatically, but the important part is that the HTML version MUST match what your JS submits exactly: same form name, and field names. You mu…

they might provide some useful starting points

[calag4n]

Hi, I read the first one it seems not helping me (I’m not a very good English speaker so I might misunderstood some points).

I’m going to read the second one, thank you.

[perry]

let us know if those articles help or not

[calag4n]

So, I’m still stuck with that.

I tried to create some others input by a map method and those last work perfectly.

I must notice that the data include in my array come from a provider’s state and the inputs are correctly fill with data in their value props.

I’ll make a CodeSandBox for trying to reproduce the bug and link it here.

For the moment, if someone have an idea of where I could did a mistake…

[calag4n]

Well, after many attempts I’m ought to say I’m done ! ^^’

I can’t get values in submissions throught an Array.map() method (else if data inside the array are hard coded but that’s not my purpose)

I think there’s something to do with the component lifecycle but I ain’t find.

Is anybody here ever had that trouble ?

I reproduced the problem on a gatsby starter so there are the sources, the CodeSandbox and the deployed Netlify URL is linked on the repo if that may help.

Thank you all.

[fool]

I think the basic thing that was missed is that indeed, all fields must be hard coded - we have to see ANY field you want us to accept at DEPLOY TIME, so your input html (not javascript, but an .html file with your form definition) needs to predefine all fields you MIGHT receive. It’s ok to not receive some, we are fine with none or many fields that were predefined. And we’ll “accept” extra fields with submission - we’ll return a good HTTP status - but we will not STORE those “extra” values.

Hopefully that is the guidance you need

[calag4n]

So, if I think users may create ten input I have to hard- code ten input (in .html file) with their respective ‘name’ props…

If that’s correct, well, indeed you perfectly helped me.

Thank you very much.

[luke]

@calag4n, yes, if you have javascript on the deployed page making those ten inputs, there also needs to a a version of the form created with HTML only. You don’t have to use this form. No user even needs to visit or use this version of the form.

It must exist, though, for Netlify to create the endpoint to receive the POSTed form data. If there is no HTML version with the inputs, the endpoint won’t be ready to receive the input because it didn’t see it in the HTML form at deploy time. If the javascript created for sends the input, the endpoint will ignore it.

If you make an HTML version, even if it isn’t even visited by a person, our build system will process the form at deploy time and then, when the javascript version of the form submits the input, the Netlify endpoint for the form will be able to receive the input successfully.