I want to send my form with form data, method POST, with Fetch API in JavaScript but I have an error.
Why I have this : runtime-core.esm-bundler.js?d2dd:218 Uncaught TypeError: Failed to construct ‘FormData’: parameter 1 is not of type ‘HTMLFormElement’.
My project is based on vue.js, express.js and mysql.
I haven’t started the backend part of the function signup in (router/controllers). But normally nothing to do with the error that is displayed
When the request returns me a code 200 at this time I can make my backend which uses express.js.
Thank you for your help.
//Vue.JS
<script>
export default {
name: "FormSuscribe",
data() {
return {
email: " ",
password_key: "",
};
},
methods: {
submitForm() {
const formData = new FormData(this);
fetch("http://localhost:8080/api/auth/signup", {
method: "POST",
body: formData,
})
.then(function (response) {
return response.json();
})
.then(function (json) {
console.log(json);
})
.catch(function (error) {
console.log(error);
});
},
},
};
</script>
<form
method="post"
@submit="submitForm()"
class="d-flex flex-column justify-content-center align-items-center"
>
<div class="form-group col-lg-5">
<label class="form-control-label">Email</label>
<input
type="text"
class="form-control"
id="formGroup2"
placeholder="@"
v-model="email"
name="email"
required
/>
</div>
<div class="form-group col-lg-5">
<label class="form-control-label">password</label>
<input
type="password"
class="form-control"
id="formGroup1"
placeholder="*******"
name="password_key"
v-model="password_key"
required
/>
</div>
<div class="form-group">
<button type="submit" value="Submit" class="btn fw-bold mt-4">
Inscription
</button>
</div>
</form>