Difficulties arise when trying to pass all data inputted on a form using formData in conjunction with the fetch API

Why is my formData appearing empty when sent to my express+mongodb server? I'm having some issues with querySelector and addEventListener, but for now that's manageable. However, I am struggling to find a way to successfully send all the values of my form to the server. Can anyone offer some guidance?

document.querySelector('#enviar-cadastro').addEventListener('click', Register);

Register('http://localhost:5000/usuario/novo')
 .then(response => console.log(response.json()))
 .then(data => console.log(data))
 .catch(error => console.log(error));

 function Register(url) {
   const formData = new FormData(document.querySelector('#signup'))

   return fetch(url, {
    method: 'POST',
    body: JSON.stringify(formData),
        headers: {
            "Content-Type": "application/json"
        }
   })

 };

Answer №1

Start by executing console.log(formDados) within the Cadastrar function to observe the output. For further assistance, refer to this resource:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating a hyperlink into an Iframe triggered by Fancybox2-AJAX, specific to the Iframe's unique identifier

One thing I have noticed is that everything seems to be working fine up until the point where I try to load it through fancybox via AJAX. An example of it working statically: <iframe id="videourl1" width="640" height="340" src="" frameBorder="0">& ...

JSON API WebConnector for Tableau

After creating a tableau webconnector to extract data from an internal API, I used earthquakeUSGS.html as a reference (https://github.com/tableau/webdataconnector). The API responds with json data (see code below). Utilizing the "Web data connector simulat ...

Tips on saving HTML table information into a .txt document?

Welcome to my Unique HTML Table. <table> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Email Id</th> <th>Phone Number</th> <th>Prefered C ...

My divs are multiplying twice as fast with every iteration of the Javascript For Loop

Recently, I developed a script that generates a series of fields based on a number provided by the user (k). Initially, I had a script that would create the correct number of fields. However, I decided to arrange them like vectors on the screen, so I made ...

Error in HTML: Text variable is not displaying the number value

Currently, I am facing a challenge with my code. I have a variable named "Timer" that I want to increment by one and then display the number. However, I am unable to see the "Test Successful!" message displayed on the screen. Surprisingly, there are no e ...

the sizing issue with three div elements

I am attempting to create 3 parallel divs in HTML. The middle div should be exactly 960px wide and centered on the page, with the left and right divs positioned on either side. The minimum width of the page is set to 1024px. When the browser width exceed ...

Error SCRIPT1002 was encountered in the vendor.js file while using Angular 8 on Internet Explorer 11

Having trouble getting Angular to function properly in IE 11. I've tried all the solutions I could find online. The errors I'm encountering are as follows: SCRIPT1002: Syntax error File: vendor.js, Line: 110874, Column: 40 At line 110874 args[ ...

Issue with improper lighting on Three.Geometry objects when using LambertMaterial in Three.js

After enhancing my initial version of this inquiry (previously asked question) with a JSFiddle showcasing the latest build of Three.JS and illustrating the lighting issue on Three.Geometry, I encountered difficulties with dependencies in Stack Snippets. Ho ...

Is there a way to access fields from an associated model within React components?

Is there a way to access fields from an associated model in React components within Rails? I have a listing model that I'm iterating through in a React component and retrieving all the fields for each record, including the ID of the associated model. ...

What is the reason for receiving the "Must provide query string" error when using the fetch API, but not when using cURL or Postman?

I've been attempting to integrate the graphbrainz library into a React app using the fetch API. No matter how I structure my request body, I keep encountering this error: BadRequestError: Must provide query string. at graphqlMiddleware (C:\U ...

Unlocking the potential: passing designated text values with Javascript

In my current React code, I am retrieving the value from cookies like this: initialTrafficSource: Cookies.get("initialTrafficSource") || null, Mapping for API const body = {Source: formValue.initialTrafficSource} Desired Output: utmcsr=(direct)|utmcmd=(n ...

Obtain keys from an object implemented with an interface in TypeScript

Is it possible to retrieve the actual keys of an object when utilizing an interface to define the object? For example: interface IPerson { name: string; } interface IAddress { [key: string]: IPerson; } const personInAddressObj: IAddress= { so ...

Implementing Asynchronous Rendering in React Router 4

I've been working with React Router 4 and trying to implement Redirect(Auth) following a guide. However, I'm facing an issue with rendering based on the promise returned by an AJAX call. It seems like my rendering logic inside the promise is not ...

Webpack generates unique hashed file names for images within the project

Within one of the components located in my client/components directory, I have imported three images from the public/images folder. Recently, webpack generated hashed files for each image such as: 0e8f1e62f0fe5b5e6d78b2d9f4116311.png. Even after deleting t ...

Retrieve JSON information from a specified URL and then display the response in the document

I am currently working on a project that involves sending a request to an API that returns JSON data. I have managed to successfully receive the response from the API in my console, but I am facing issues with displaying it on my own URL using res.send. ...

"Upon calling an asynchronous method within another method, it appears that no progress is being displayed

I've created a `node-js` `db.js` class that retrieves an array of data for me. //db.js const mysql = require('mysql'); var subscribed = []; const connection = mysql.createConnection({ host: 'localhost', user: 'root' ...

Ways to eliminate unnecessary re-rendering of components that remain unchanged?

I am struggling with a component that contains various other components, such as text fields. Whenever an input is made in the text field, all the components are re-rendered. My goal is to prevent this re-rendering and only update the component that has a ...

Passing data from PHP to jQuery in a file upload script

I'm facing a problem that I can't seem to solve on my own. What I am trying to achieve is to upload a file to the server via PHP (upload.php), generate a new filename, and then pass that new filename to my webpage (upload.html). Within my uploa ...

What causes the "This page isn't responding" error to pop up in Edge and Chrome browsers while attempting to perform consecutive tasks in a web application built with Angular 8?

Trouble with Page Loading Whenever this error occurs, I find myself unable to perform any activities on that page. The only solution is to close the tab and open a new one. My current code allows me to navigate through an array list (Next and Previous) us ...

Discover the best method for transferring MySQL data between pages

Can anyone help guide me in the right direction on how to allow a user to click a link within a PHP While Loop generated MySQL table and pass that data to another page? I've searched through similar questions but haven't found a solution that fit ...