JQuery convert html form to JSON in a correct format

Question

I am a beginner in JQuery and I am trying to do a very simple thing: get a html form, convert it to JSON, send it to my API and display the result.

I read multiple SO post about serializing forms and arrays into JSON but I am unable to get it work(I either get 400 - Bad Request response because my JSON is not in a correct format or 415 status for some reason).

This is the Html form:

<form id="imageUploadForm">
        <fieldset>
        <legend>Upload new image</legend>
        <p>
                <label for="imageUrl">Image URL:</label>
                <input id="imageUrl" type="text" name="imageUrl" />
        </p>
        <p>
                <label for="tag">Tag:</label>
                <input id="tag" type="text" name="tag" />
        </p>
        <p>
                <input id="uploadButton" type="button" value="Submit" />
        </p>
        </fieldset>
</form>

<div id="uploadResponse"></div>

And script handling the request:

$(document).ready(function() {

  //Stops the submit request
  $("#imageUploadForm").submit(function(e) {
    e.preventDefault();
  });

  //checks for the button click event
  $("#uploadButton").click(function(e) {

        //get the form data and then serialize that
        var json = JSON.parse(JSON.stringify(jQuery('#imageUploadForm').serializeArray()));

        $.ajax({
        type: "POST",
        url: "<url>",
        data: json,
        crossDomain: true,
        dataType: "text/plain",

        //if received a response from the server
        success: function(response) {
                $("#uploadResponse").append(response);
        },

        });
  });

});

Could someone point me to the right direction? The goal is to send the following JSON to the api:

{
   "imageUrl" : "...",
   "tag" : "..."
}

Maybe this will help contentType: "application/json; charset=utf-8" — Tech Savant
– Tech Savant, Commented Mar 11, 2016 at 9:42
Try to use solution from this answer - stackoverflow.com/a/1186309/6014444 — kb0
– kb0, Commented Mar 11, 2016 at 9:48

getty · Accepted Answer · 2016-03-11 09:55:31Z

2

Can you check following code and fiddle link,

$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
    if (o[this.name] !== undefined) {
        if (!o[this.name].push) {
            o[this.name] = [o[this.name]];
        }
        o[this.name].push(this.value || '');
    } else {
        o[this.name] = this.value || '';
    }
});
return o;
};

$(function() {
$("#imageUploadForm").submit(function(e) {
e.preventDefault();
});
$('#uploadButton').click(function() {
var jsonText = JSON.stringify($('form').serializeObject());
    $('#result').text(JSON.stringify($('form').serializeObject()));
     $.ajax({
    type: "POST",
    url: "<url>",
    data: jsonText,
    crossDomain: true,
    dataType: "text/plain",

    //if received a response from the server
    success: function(response) {
            $("#uploadResponse").append(response);
    },

    });
});
});


http://jsfiddle.net/sxGtM/7142/

Hope it may help you.

answered Mar 11, 2016 at 9:55

getty

13511 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Smajl Over a year ago

This is the only approach that worked so far. Although I imagined that such a simple thing as sending a serialized form as JSON should not require so much boiler plate code

Denis Frezzato · Accepted Answer · 2016-03-11 09:41:26Z

0

You don't have to parse the stringified JSON, otherwise you send a JS object. You have to send a string rappresenting a JSON.

var json = JSON.stringify(jQuery('#imageUploadForm').serializeArray());

answered Mar 11, 2016 at 9:41

Denis Frezzato

9786 silver badges15 bronze badges

Comments

Tech Savant · Accepted Answer · 2016-03-11 09:44:20Z

0

Try changing the content type to contentType: "application/json; charset=utf-8", and if your api is returning json set dataType: "json".

What is your console reporting, if anything?

answered Mar 11, 2016 at 9:44

Tech Savant

3,7671 gold badge21 silver badges40 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:50:28Z

0

just use var json=$('#imageUploadForm').serialize()

according to your form in question you dont need serializeArray and change content type contentType:"application/json; charset=utf-8",

check this SO link

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Mar 11, 2016 at 9:44

Pavan Teja

3,2021 gold badge18 silver badges22 bronze badges

1 Comment

Smajl Over a year ago

I tried console.log(json) and it produces url-encoded content: imageUrl=...&tag=... and thus results in Bad Request

DAre G · Accepted Answer · 2016-03-11 10:02:24Z

0

    var imagedataUrl = $("#imageUrl").val();
    var tagdataUrl = $("#tag").val();

    $.ajax({
    type: "POST",
    url: "<url>",
     dataType: "json",
    data: { imageUrl: imagedataUrl  , tag: tagdataUrl },
    contentType: "application/json; charset=utf-8;",
    crossDomain: true,


    //if received a response from the server
    success: function(response) {
            $("#uploadResponse").append(response);
    },

    });

edited Mar 11, 2016 at 10:02

answered Mar 11, 2016 at 9:45

DAre G

19710 bronze badges

3 Comments

Smajl Over a year ago

Your code produces the following payload: imageUrl=...&tag=... It somehow does not interpret those data as JSON

DAre G Over a year ago

Use data:JSON.stringify(object)

Smajl Over a year ago

Could you provided a working example, please? This only results in 415

Prasad Khode · Accepted Answer · 2016-03-11 12:56:47Z

-1

You should mention your content type which is sent to server

varContentType="application/json; charset=utf-8";

$.ajax({
    type: varType, //GET or POST or PUT or DELETE verb
    url: varUrl, // Location of the service 
    data: varData, //Data sent to server
    contentType: varContentType, // content type sent to server
    dataType: varDataType, //Expected data format from server
    processData: false,
    crossDomain: true,
});

edited Mar 11, 2016 at 12:56

Prasad Khode

6,77712 gold badges48 silver badges62 bronze badges

answered Mar 11, 2016 at 9:58

karthivengadesh

12 bronze badges

Collectives™ on Stack Overflow

JQuery convert html form to JSON in a correct format

6 Answers 6

1 Comment

Comments

Comments

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related