Send JSON Data on HTML form submit

Question

I have a html form and that form has two fields (name , description). When a user hits submit button for that form I want to submit form data in json format.

I tried the following:

        function submitData(){
            payload.name = $("#project-name").val();
            payload.description = $("#project-description").val();

            $.post("http://localhost:5000/task-groups/add", payload);
            return false;
        }

Submitdata is called when my form's button is clicked. But this is sending form data and not json data

I have a python flask server running.

[1] When I do:

payload = request.get_json()
name = payload['name']

It is throwing the following exception

File "/Users/saik/projects/mturk/server/src/index.py", line 37, in add_task_group
  name = payload['name']
TypeError: 'NoneType' object is not subscriptable

[2] However, I am able to access the data on the server side using following:

name = request.form['name']

Is it possible to send json data on form submit, so that I can access data using [1]

The reason I am trying to send JSON data on form submit is because I have a server which serves REST API for command line clients. And I would like to use same server and endpoint to serve browser based clients.

Dan Malcolm · Accepted Answer · 2013-09-26 08:36:34Z

There are 2 things you need to do to send JSON to the server with a jQuery AJAX call:

The request payload should be a string containing the JSON payload (not a JavaScript object)
The "Content-Type" header in the HTTP request should be set to "application/json". This lets the server know that the request payload contains JSON data. $.post uses the default value of "application/x-www-form-urlencoded" for the "Content-Type" header. $.ajax allows you to set this header via the "contentType" option.

Try changing your code to the following:

$.ajax({
  type: 'POST',
  url: 'http://localhost:5000/task-groups/add',
  contentType: 'application/json',
  dataType: 'json',
  data: JSON.stringify(payload)
});

Note that $.post has a dataType parameter, but this controls the "Accept" request header, which is used to indicate the preferred format for the response.

Reigel Gallarde · Accepted Answer · 2013-08-22 07:17:51Z

0

I'm not sure... but I think passing as JSON is not the right way to do this... or it's just "troublesome" to do...

why not just do it like this then?!

payload = request.form
name = payload['name']

answered Aug 22, 2013 at 7:17

Reigel Gallarde

65.4k21 gold badges126 silver badges142 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:59:55Z

0

You need to cancel the event

$(function() {
  $("form").on("submit",function(e) {
    e.preventDefault(); // cancel the submission
    $.post($(this).attr("action"),{ "name":$("#project-name").val(), "description":$("#project-description").val() });
  });
});

To post JSON read Post JSON to Python CGI

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Aug 22, 2013 at 6:55

mplungjan

180k29 gold badges183 silver badges246 bronze badges

4 Comments

user462455 Over a year ago

Tried that. It is still sending as form data

user462455 Over a year ago

I attached browser network snapshot and my javascript snippet

mplungjan Over a year ago

And the console? Why do you want to send json? That is not normally useful on a server

user462455 Over a year ago

I have a same server which exposes REST api for command line clients. I want to use same server and endpoint to serve form submits also.

Pranit Bhor · Accepted Answer · 2016-11-25 04:55:31Z

0

using ajax call you can send successfully using this code:

<script>
$(document).ready(function(){
$("#submitform").click(function(e)
{
var MyForm = JSON.stringify($("#myform").serializeJSON());
console.log(MyForm);
 $.ajax(
 {
 url : "<your url>",
 type: "POST",
 data : MyForm,

 });
 e.preventDefault(); //STOP default action

});
});
</script>

answered Nov 25, 2016 at 4:55

Pranit Bhor

1562 silver badges13 bronze badges

Collectives™ on Stack Overflow

Send JSON Data on HTML form submit

4 Answers 4

Comments

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related