Why html form sending empty data?

Question

I have a html form whose data needs to be send to the server.I am using the encoding type as multipart/form-data.

THe HTML form for the same is :

 <form class="news-container" enctype="multipart/form-data">
        <input type="checkbox" name=""><span>Featured Content</span></input>
        <br/>
        <br/>
        <input type="submit"  class="submit-btn"></input>
 </form>

The code for getting formData and sending the post request is :

const form=document.querySelector('.news-container');
submitbtn.addEventListener('click', (e) => {
    e.preventDefault();
    if(validateForm())
    {
    const data=new FormData(form);
    postData(data);    
    }
})

async function postData(data) {
    await fetch('http://localhost:5000/create', {
        method: 'POST',
        body: {
            title: `${data.title}`, content: `${data.content}`
        },
        headers: {
            'Content-Type': 'application/json'
        }
    })
    
}

Haris Bouchlis · Accepted Answer · 2022-05-24 12:07:56Z

1

You can use the get method from FormData (docs) to read specific values, like so:

async function postData(data) {
    await fetch('http://localhost:5000/create', {
        method: 'POST',
        body: {
            title: `${data.get('title')}`, content: `${data.get('content')}`
        },
        headers: {
            'Content-Type': 'application/json'
        }
    })
    
}

keep in mind that in the example you posted there are no title or content form fields.

answered May 24, 2022 at 12:07

Haris Bouchlis

2,5861 gold badge25 silver badges39 bronze badges

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

Collectives™ on Stack Overflow

Why html form sending empty data?

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