How to send a JSON object using html form data

javascript jquery html json forms

568,654

Solution 1

Get complete form data as array and json stringify it.

var formData = JSON.stringify($("#myForm").serializeArray());

You can use it later in ajax. Or if you are not using ajax; put it in hidden textarea and pass to server. If this data is passed as json string via normal form data then you have to decode it using json_decode. You'll then get all data in an array.

$.ajax({
  type: "POST",
  url: "serverUrl",
  data: formData,
  success: function(){},
  dataType: "json",
  contentType : "application/json"
});

Solution 2

HTML provides no way to generate JSON from form data.

If you really want to handle it from the client, then you would have to resort to using JavaScript to:

gather your data from the form via DOM
organise it in an object or array
generate JSON with JSON.stringify
POST it with XMLHttpRequest

You'd probably be better off sticking to application/x-www-form-urlencoded data and processing that on the server instead of JSON. Your form doesn't have any complicated hierarchy that would benefit from a JSON data structure.

Update in response to major rewrite of the question…

Your JS has no readystatechange handler, so you do nothing with the response
You trigger the JS when the submit button is clicked without cancelling the default behaviour. The browser will submit the form (in the regular way) as soon as the JS function is complete.

Solution 3

You can try something like:

<html>
<head>
    <title>test</title>
</head>

<body>
    <form id="formElem">
        <input type="text" name="firstname" value="Karam">
        <input type="text" name="lastname" value="Yousef">
        <input type="submit">
    </form>
    <div id="decoded"></div>
    <button id="encode">Encode</button>
    <div id="encoded"></div>
</body>
<script>
    encode.onclick = async (e) => {
        let response = await fetch('http://localhost:8482/encode', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                },
        })

        let text = await response.text(); // read response body as text
        data = JSON.parse(text);
        document.querySelector("#encoded").innerHTML = text;
      //  document.querySelector("#encoded").innerHTML = `First name = ${data.firstname} <br/> 
      //                                                  Last name = ${data.lastname} <br/>
      //                                                  Age    = ${data.age}`
    };

    formElem.onsubmit = async (e) => {
      e.preventDefault();
      var form = document.querySelector("#formElem");
     // var form = document.forms[0];

        data = {
          firstname : form.querySelector('input[name="firstname"]').value,
          lastname : form.querySelector('input[name="lastname"]').value,
          age : 5
        }

        let response = await fetch('http://localhost:8482/decode', {
                method: 'POST', // or 'PUT'
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data),
        })

        let text = await response.text(); // read response body as text
        document.querySelector("#decoded").innerHTML = text;
    };
</script>
</html>

Solution 4

you code is fine but never executed, cause of submit button [type="submit"] just replace it by type=button

<input value="Submit" type="button" onclick="submitform()">

inside your script; form is not declared.

let form = document.forms[0];
xhr.open(form.method, form.action, true);

Solution 5

I'm late but I need to say for those who need an object, using only html, there's a way. In some server side frameworks like PHP you can write the follow code:

<form action="myurl" method="POST" name="myForm">
        <p><label for="first_name">First Name:</label>
        <input type="text" name="name[first]" id="fname"></p>

        <p><label for="last_name">Last Name:</label>
        <input type="text" name="name[last]" id="lname"></p>

        <input value="Submit" type="submit">
    </form>

So, we need setup the name of the input as object[property] for got an object. In the above example, we got a data with the follow JSON:

{
"name": {
  "first": "some data",
  "last": "some data"
 }
}

View more solutions

568,654

stratis

Updated on April 02, 2022

Comments

stratis about 2 years
So I've got this HTML form:
```
<html>
<head><title>test</title></head>
<body>
    <form action="myurl" method="POST" name="myForm">
        <p><label for="first_name">First Name:</label>
        <input type="text" name="first_name" id="fname"></p>

        <p><label for="last_name">Last Name:</label>
        <input type="text" name="last_name" id="lname"></p>

        <input value="Submit" type="submit" onclick="submitform()">
    </form>
</body>
</html>
```
Which would be the easiest way to send this form's data as a JSON object to my server when a user clicks on submit?

UPDATE: I've gone as far as this but it doesn't seem to work:
```
<script type="text/javascript">
    function submitform(){
        alert("Sending Json");
        var xhr = new XMLHttpRequest();
        xhr.open(form.method, form.action, true);
        xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
        var j = {
            "first_name":"binchen",
            "last_name":"heris",
        };
        xhr.send(JSON.stringify(j));
```
What am I doing wrong?
- Rory McCrossan about 10 years
  
  Take a look at $.ajax and serialize in the jQuery API.
- Anthony Grist about 10 years
  
  Does it absolutely have to be a JSON object? What structure should the object have?
- stratis about 10 years
  
  @AnthonyGrist Yes it has to be a JSON cause it's addressed toward a ReST service.
- Dour High Arch almost 9 years
  
  What does “doesn't seem to work” mean? Remember, we can't see your screen.
- danielm over 8 years
  
  @Konos5 - REST has nothing to do with JSON. It doesn't require that data be in any particular format.
- AmaJayJB about 7 years
  
  In the above example of your code, your json is incorrect. That might be causing an issue.
- baptx about 6 years
  
  If you want to test the security of a web application against CSRF, there is a hack to send JSON using an HTML form: stackoverflow.com/questions/19446544/…
- keithhackbarth about 6 years
  
  Here's a library that I created to do just this: github.com/keithhackbarth/submitAsJSON
- Cherry about 6 years
  
  Use enctype <form enctype='application/json'> :) P.S. question marked as too broad but it is not, please update question and add answer to it.
- Cassian about 5 years
  
  line xhr.open(form.method, form.action, true); - form where this function should get the variable form?
SachinGutte about 10 years

You've tagged question with jQuery. So are you using it ? with $.ajax it's really easy to pass this data.
stratis about 10 years

OK, so how do I fix this?
user2284570 over 8 years

@Quentin : In my case I need cross domain POST without domain control.
Quentin over 8 years

@user2284570 — If you have a new question, then ask one.
user2284570 over 8 years

@Quentin : as been already been asked but answered in way only helpful for the op. In fact I found a way to bypass a forum sanitizer to put data: uri inside an attribute (not applicable for javascript: scheme) (the only way to get attribute value’s is to access page source code). And I’m looking for way to prove such a situation can harm users (every action on the site require to read response).
Quentin over 8 years

@user2284570 — Why are you asking your question in a comment on an unrelated answer?
user2284570 over 8 years

@Quentin : not completely unrelated, I found a cross browser way to read answer with html form, however the site require javascript and all actions use ᴊꜱᴏɴ. So sending a JSON object using html form data can solve the thing.
yardpenalty.com almost 8 years

@user2284570 pass using JSONP for all cross-domain ajax requests
Quentin almost 8 years

@yardpenalty — JSONP is a horrible hack. It demands a hell of a lot of trust as it exposes the site reading the data to XSS, and it is very limited. We have CORS now. Don't use JSONP.
yardpenalty.com almost 8 years

Well we use it for RPGLE PGMS located on a different port than HTTP page requests (php) which makes it very difficult to hack since you can't really inject SQL scripts into our PGMs. I appreciate the info. Will do some investigating on CORS. We are doing same server just different port and we trust ourselves, but for Web Services I would like to use CORS.
EkriirkE about 6 years

There is a proposal for adding enctype='application/json' to the form definition to create JSON data w3.org/TR/html-json-forms
Quentin about 6 years

@EkriirkE — Have you read that page? It says, in a massive box with a black and yellow danger stripe around it Beware. This specification is no longer in active maintenance and the HTML Working Group does not intend to maintain it further.
keithhackbarth about 6 years

Here's a library that I created that enables this: github.com/keithhackbarth/submitAsJSON
Rohit Parte almost 5 years

Exactly type="button" is very important, if not use then it redirect with url params.
Mohammed Noureldin over 3 years

I have not tested this, but this seems also to be a good solution.
Antoniossss over 2 years

this does not post json but plain form data. Framework conversta that for you. I am surprised that this is upvoted so much.
Antoniossss over 2 years

This does not post json but single form input with json value - that is a big difference