Form does not have data in FormData javascript

Question

I'm trying to submit a form without redirecting using AJAX. From the answers I saw the [best](new URLSearchParams(new FormData(form).entries()); ) I found (I think) without using jQuery was:

const form = document.querySelector('form');
const data = Object.fromEntries(new FormData(form).entries());

I'm trying to apply this mechanism in my code, but for some reason my form does not have information. I guess I'm calling the function before it gets recorded? But I'm not sure how to fix it.

My code (simplified):

HTML (using React and Reactstrap):

<Reactstrap.Form id="commentform" />
    <Reactstrap.Input type="textarea" rows={4}></Reactstrap.Input>
</Reactstrap.Form>
...
<Reactstrap.Button onClick={()=>setTimeout(()=>{this.postComment()},500)}>Post</Reactstrap.Button>

JS (inside the same React class):

postComment=()=>{
    let xhttp = new XMLHttpRequest();
    const form = document.querySelector('#commentform');  //this gets the form properly
    const data = Object.fromEntries(new FormData(form).entries());  //this doesn't return anything
    xhttp.open("POST", '/postComment/', false);  //don't mind the fact that this is synchronized, shouldn't matter
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  //I in tutorials like W3S that this is required
    xhttp.send('newcomment='+data);
}

Any help would be appreciated.

marekful · Accepted Answer · 2021-01-28 21:41:30Z

2

From MDN docs

Note: FormData will only use input fields that use the name attribute.

Try naming the input element:

<Reactstrap.Input name="newcomment" type="textarea" rows={4}></Reactstrap.Input>

answered Jan 28, 2021 at 21:41

marekful

15.4k6 gold badges39 silver badges63 bronze badges

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

Collectives™ on Stack Overflow

Form does not have data in FormData javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related