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">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Employees</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <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 = {
        empid:'empid',
        name:'name',
        age: 'age',
        email: 'email',
        mobile: 'mobile'  
        };
        const options = {
        method:'POST',
        headers:{
        'Content-Type' : 'application/json;charset=UTF-8'
        },
        body: JSON.stringify(data)
        };
        fetch('http://localhost:8081/employee',options)
        .then((response) => response.text())
        .then((result) => console.log("result: " + result))
        .catch((error) => console.log("error: " + error));;  
        }
    </script>
</head>
<body>
    <div class="container">
        <div class="row">
            <form>
                <div class="form-group">
                    <label for="empid">Employee ID: </label><input type="text" name="empid"
                    value=""/><br/>
                    <label for="name">Name </label><input type="text" name="name"
                    value=""/><br/>
                    <label for="age">Age </label><input type="number" name="age"
                    value=""/><br/>
                    <label for="email">Email </label><input type="email" name="email"
                    value=""/><br/>
                    <label for="mobile">Mobile </label><input type="number" name="mobile"
                    value=""/><br/>
                </div>
                <div>
                    <button type="submit" class="btn btn-primary" onclick="invokePOST()">Submit</button>
                </div>
              </form>
            <button class="btn btn-primary" onclick="invokeGET()">GET</button>
        </div>
    </div>
</body>
</html>


Read more here: https://stackoverflow.com/questions/68477455/post-request-is-not-working-with-fetch-method-and-html-forms

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: