Submit multiple forms with fetch

Question

I am trying to create a way for a user to multiply their form.

A user may add several "Name"/"Number" at one time. But they will only add it under one "Area"

How do I create a form where I can "duplicate" the input fields?

It will, in a way, simply "copy" the form so you can enter the data again.

This screenshot should explain:

I've also put it in a code pen:

http://codepen.io/yarnball/pen/qaQomG?editors=1010

var Postapi = React.createClass({
  getInitialState: function() {
  return {
    area:'',
    name: '',
    number: '',
  };
  },
  onChange(e) { 
    this.setState({[e.target.name]: e.target.value})
              },

  handleSubmit: function(e) {
     e.preventDefault();
     return fetch('http://localhost:8000/api/Data/', {
     method: 'POST',
     body: JSON.stringify({
         area: this.state.area,
         info:[
           {name:this.state.name,
           taglevel:this.state.number}
          ],
      })
      })
      .then(function(res){ return res.json(); })
      .then(function(data){ alert( JSON.stringify( data ) ) })
  },

  render: function() {
    return (
      <form onSubmit={this.handleSubmit}>
      <input
        name="area"
        type="text"
        placeholder="Area"
        onChange={this.onChange}
      />
      <input
        name="name"
        type="text"
        placeholder="Name"
        onChange={this.onChange}
      />
      <input
        name="number"
        type="text"
        placeholder="Number"
        onChange={this.onChange}
      />
       <button type="submit">Submit</button>
      </form>
    );
  }
});

Basically I want to create a form where it can duplicate the input fields and fill the body of the fetch accordingly. I created a screenshot to hopefully make it clear. — Ycon
– Ycon, Commented Oct 23, 2016 at 14:15
you should try redux-form if you are not planning to write yet another lib. — Fazal Rasel
– Fazal Rasel, Commented Oct 23, 2016 at 17:34

Pranesh Ravi · Accepted Answer · 2016-10-23 16:12:55Z

1

Working pen: http://codepen.io/pranesh-r/pen/qagmxX?editors=1010

You need state to maintain the number of input block to be displayed. When the user clicks add more, increment the state and render the n number of input blocks. This solves your first problem.

Handler

addMore(){
 this.setState({
   formItems: this.state.formItems + 1
 })
},

HTML

<button type="button" onClick={this.addMore}>Add More</button>

Dynamic content

const fi = <div>
        <input
          name="name"
          type="text"
          placeholder="Name"
          onChange={this.onChange}
        />
        <input
          name="number"
          type="text"
          placeholder="Number"
          onChange={this.onChange}
        />
      </div>
      const formItem = [];
      for (var i= 0; i< this.state.formItems; i++){
        formItem.push(fi)
      }

Use the formItem in the render.

To serialize the form, I've used jQuery .serialize(). If you don't wanna use jQuery you need to maintain the values of the input in the state for the each inputs. And during submit, get the value from the state and pass it to the server. This solves your second problem.

Hope this helps!

answered Oct 23, 2016 at 16:12

Pranesh Ravi

19.2k10 gold badges51 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ycon Over a year ago

Thanks- this helps! I'm not sure whether I should use jQuery (never used it) but ideally I just need to pass the values to my server like in my fetch. How do I do the post of the multiple fields?

Collectives™ on Stack Overflow

Submit multiple forms with fetch

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related