CODEWITHSUNDEEP
javascriptjqueryajaxpost
mudejar
mudejar

Reputation: 167

What's wrong with this POST request?

I've been trying to grab information from a web app i've created and sending the information as a post request to a java server backend. The Webstorm IDE comes with a built in tool to send get and post requests to an endpoint. When I tested the connection with this tool I received a successful 200 page. However, when I try and execute a post request using JQuery I end up with a form that reloads and no message as to whether the post was successful or not. When I check the server for any changes, I see that there are none.

This is the HTML page which calls the function:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sign up page</title>

    <!-- bootstrap core css -->
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- custom styles for this template -->
    <link href="bower_components/bootstrap/dist/css/signIn.css" rel="stylesheet">

    <!-- Amazon aws javascript api -->
    <script type="text/javascript" src="bower_components/aws-sdk/dist/aws-sdk.min.js"></script>

    <!-- JQuery library for js -->
    <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>

    <!-- custom js for signing creating profiles -->
    <script type="text/javascript" src="js/profileCreation.js"></script>

</head>
<body>
    <!-- Fields to fill out -->
    <div class="container">

        <form class="form-signin">
            <h2 class="form-signin-heading">Create your profile</h2>
            <label for="firstname" class="sr-only">First Name</label>
            <input type="text" id="firstname" class="form-control" placeholder="First Name" required autofocus>
            <label for="lastname" class="sr-only">Last Name</label>
            <input type="text" id="lastname" class="form-control" placeholder="Last Name" required autofocus>
            <label for="username" class="sr-only">Username</label>
            <input type="text" id="username" class="form-control" placeholder="Username" required autofocus>
            <label for="inputEmail" class="sr-only">Email address</label>
            <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
            <label for="inputPassword" class="sr-only">Password</label>
            <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
            <div class="checkbox">
                <label>
                    <input type="checkbox" value="remember-me"> Remember me
                </label>
            </div>
            <button class="btn btn-lg btn-warning btn-block" onclick="createProfile()" type="submit">Sign up</button>
        </form>

    </div> <!-- /container -->

</body>
</html>

And this is the JS file with the function being called

/**
 * Created by uidp1981 on 9/22/15.
 */

function createProfile() {
    var firstname = document.getElementById("firstname").value;
    var lastname = document.getElementById("lastname").value;
    var username = document.getElementById("username").value;
    var email = document.getElementById("inputEmail").value;
    var password = document.getElementById("inputPassword").value;

    //var urlEndpoint = "http://localhost:8080/GoAPI/User";

    // JSON with user input data, update with more fields when possible
    var data = {"firstname" : firstname,
                "lastname" : lastname,
                "email" : email ,
                "username" : username,
                "password" : password};

    // POST request
    $.ajax({
        url: "http://localhost:8080/GoAPI/User",
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(data),
        success: function(){
            //On ajax success do this
            alert("data");
        },
        error: function(xhr, ajaxOptions, thrownError) {
            //On error do this
            alert("There is something wrong " + xhr.status);
        }
    })
}

Originally my problem was the same origin policy from javascript, but I worked around it with CORS for chrome. After that the problem is that I hit the submit button, but the page simply refreshes and I end up with neither an alert showing success nor one pointing out an error. Did I put incorrect parameters in my POST request or something? I checked many times and tried many different parameters so I'd be really surprised if that's the problem.

Upvotes: 0

Views: 119

Answers (2)

TheLuminor
TheLuminor

Reputation: 1411

<input type="button" />buttons will not submit a form - they don't do anything by default. They're generally used in conjunction with JavaScriptas part of an AJAXapplication.

<input type="submit">buttons will submitthe form they are in when the user clickson them, unless you specify otherwise with JavaScript.

Also, this is why browsers can capture the "Enter" keypress on a form and submit the form automatically if there is a submit button, but not otherwise

A button is just that, a button, to which you can add additional functionality using Javascript. A submit input type has the default functionality of submitting the form it's placed in.

So when you declare a Button as type submit when you dont actually require it to, it hits the server and comes back with an entire HTTP request whereas what you need here is an AJAX request. Hope this helps you understand why you are facing the problem.

Further, to solve your problem, change your button type to button instead of submit and it should work completely fine.

Upvotes: 2

dotnetom
dotnetom

Reputation: 24901

Currently you have an attribute type="submit" set on your button. When you click this button, it causes your form to be submitted to the server, so instead of AJAX request, you get a full page request.

You should be able to resolve the issue that you have by changing button type to button:

<button class="btn btn-lg btn-warning btn-block" 
    onclick="createProfile()" 
    type="button">Sign up</button>

Upvotes: 4

Related Questions