post html form results to api as json

Question

I want to submit a form and have the values sent to the api in json format and save the response in a variable. When i try this using the below code i get an 'Internal Server Error' message.

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
    <script>
        $('#myForm').ajaxForm({
            url : 'myurl.com', 
            dataType : 'json',
            success : function (response) {
                alert("The server says: " + response);
            }
        });
    </script>
</head>

<body>
    <form class="myForm" method="POST" action="myurl.com">
        <div class="form-group row">
            <label for="example-text-input" class="col-2 col-form-label">Season</label>
            <input class="form-control" type="text" id="season">
        </div>

        <div class="form-group row">
            <label for="example-number-input" class="col-2 col-form-label">Students</label>
            <input class="form-control" type="number" id="num_students">
        </div>

        <div class="form-group row">
            <label for="example-number-input" class="col-2 col-form-label">teachers</label>
            <input class="form-control" type="number" value="42" id="num_teachers">
        </div>

        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</body>
</html>

The parameters the api takes are 'season', 'num_teachers', 'num_students'. Once it has all the parameters it will send a result response back. How can i send my form results to the api and get back the response?

Possible duplicate of [How to send a JSON object using html form data](https://stackoverflow.com/questions/22195065/how-to-send-a-json-object-using-html-form-data) — Sameer, Nov 23 '18 at 19:24
First, if you are getting a Internal Server Error the error is trigger in the backend, probably you are not passing some required parameter, you need to debug the backend code in order to figure out why an what is the error. on the other hand, you try to send the form by its id `$('#myForm')`, and the form does not have the assigned id attribute, but it has the class attribute — Mario, Nov 23 '18 at 19:39

Hexxefir · Accepted Answer · 2018-11-23T21:11:56.297

I don't know why you using a jQuery plugin to send form in Ajax, totally useless.

$('#myForm').on('submit', function() { // Fired listener when submit button is clicked.
  $.ajax({
    url: 'myurl.com',
    dataType : 'json', // Try text also, maybe the api donn't send result in json. Text always work.
    data: $('#myForm').serialize(); // The form to send.
    success : function (response) {// Get response on successful sever connection.
      console.log(response); // or alert
    }, error: function (err) { // Get error on failed connection to server.
      console.log(err); // or alert
    }
  }
});

Replace your function by that one. Remove action attribute on your html form tag. Now you handle errors and response from server. That means if the server returns an error, it will be displayed in your console and you will be able to know the problem. Other thing, do you really need this old version of jQuery, cause now we are at version 3.3.1.

post html form results to api as json

1 Answers1