FormData Returns empty data on form submission in react

Question

I am trying to get the form data key-value pair object when the form is submitted, using the new FormData() constructor. But it always returns empty data.

I have already tried event.persist() to avoid react event pooling, but nothing worked


export default class Test extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    const target = event.target;
    const data = new FormData(target);
    console.log(data)
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="username">Enter username</label>
        <input id="username" name="username" type="text" />

        <button>Send data!</button>
      </form>
    );
  }
}

I am expecting an object that contains my form data in the following format

{ "username": "Value" }

FormData doesn't provide Properties like that. Try console.log(...data) or the methods that FormData provides to modify/access data. — Thomas
– Thomas, Commented May 20, 2019 at 6:05

Zabih Ullah · Accepted Answer · 2019-05-20 06:06:00Z

33

I think you need to fetch it through looping. Try this

  var formData = new FormData(target);

   for (var [key, value] of formData.entries()) { 
   console.log(key, value);
  }

Hope it works.

answered May 20, 2019 at 6:06

Zabih Ullah

6056 silver badges14 bronze badges

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

Comments

RIYAJ KHAN · Accepted Answer · 2019-05-20 06:17:43Z

3

handleSubmit should be like this.

handleSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.target);
    fetch('my-api', {
      method: 'POST',
      body: data,
    });
  }

After form submit, in network tab you will find form data with key-value.

If you want to access single value,

const username = data.get('username');

answered May 20, 2019 at 6:17

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

Comments

Mattia Fantoni · Accepted Answer · 2020-10-20 19:50:21Z

1

In my case I had to use this generic code snippet

    const form = event.target;
    const data = {};
    for (let i=0; i < form.elements.length; i++) {
        const elem = form.elements[i];
        data[elem.name] = elem.value
    }

I don't know the reason of this behaviour but it may be because the input inside form are not a part of the DOM anymore

edited Oct 20, 2020 at 19:50

answered Oct 20, 2020 at 19:44

Mattia Fantoni

96511 silver badges16 bronze badges

Comments

lhmt · Accepted Answer · 2024-04-16 02:32:50Z

0

Just elaborate more on Zabih's answer, an alternative to looping is to convert the entries to an object

  const submitForm = async (e: FormEvent) => {
    e.preventDefault();

    const form = e.target as HTMLFormElement;

    const formData = new FormData(form);
    const formDataEntries = formData.entries();

    const myData = Object.fromEntries(formDataEntries);
    console.log(myData);
  };

answered Apr 16, 2024 at 2:32

lhmt

315 bronze badges

Comments

Amani Amani · Accepted Answer · 2024-05-03 12:06:49Z

0

It is simple

const formData = new FormData(e.target);

const inputs = Object.fromEntries(formData);

answered May 3, 2024 at 12:06

Amani Amani

112 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Роман Зыков · Accepted Answer · 2022-01-11 16:04:54Z

-1

one of if you are using React, just use htmlType tag

<Form.Item>
  <Button type="primary" htmlType="submit" />
    Submit action
  </Button>
</Form.Item>

answered Jan 11, 2022 at 16:04

Роман Зыков

6036 silver badges7 bronze badges

Collectives™ on Stack Overflow

FormData Returns empty data on form submission in react

6 Answers 6

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related