POST request is not working with .fetch method and HTML forms

extremely new to APIs but I have managed to learn GET, DELETE, PUT and POST requests using postman. However I am trying to do so using HTML now on the front end but I am having difficulty with POST request. I managed to use HTML to implement GET request successfully using the invokeGET() method however my method for POST which is invokePOST() is not working. I am using HTML forms and I'm not sure if my format is correct or if I am binding to the wrong values, can someone please check and help me, I will appreciate it a lot. I am also not getting any errors but I see that the new object was not added when I submit a GET request. The backend code is too large so I hope this would be sufficient. Thank you.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="">
    <script src=""></script>
    <script src=""></script>
        function invokeGET() {
        var requestOptions = {
        method: 'GET',
        redirect: 'follow',
        fetch('http://localhost:8081/employee', {requestOptions})
        .then((response) => response.text())
        .then((result) => console.log("result: " + result))
        .catch((error) => console.log("error: " + error));

        function invokePOST(){
        const data = {
        age: 'age',
        email: 'email',
        mobile: 'mobile'  
        const options = {
        'Content-Type' : 'application/json;charset=UTF-8'
        body: JSON.stringify(data)
        .then((response) => response.text())
        .then((result) => console.log("result: " + result))
        .catch((error) => console.log("error: " + error));;  
    <div class="container">
        <div class="row">
                <div class="form-group">
                    <label for="empid">Employee ID: </label><input type="text" name="empid"
                    <label for="name">Name </label><input type="text" name="name"
                    <label for="age">Age </label><input type="number" name="age"
                    <label for="email">Email </label><input type="email" name="email"
                    <label for="mobile">Mobile </label><input type="number" name="mobile"
                    <button type="submit" class="btn btn-primary" onclick="invokePOST()">Submit</button>
            <button class="btn btn-primary" onclick="invokeGET()">GET</button>

Read more here:

Content Attribution

This content was originally published by argonx at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: