How to send a JSON object using html form data

html form to json object
html form post json example
how to save html form data to json using javascript
how to convert html form field values to a json object javascript
html post json example
how to send form data in json format
html form content-type json
form data to json online

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?

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"
});

How to Convert HTML Form Field Values to a JSON Object � Learn , As you can see, it basically serves a secret number that can be updated via HTTP POST of a JSON object. If we attempt a URL-encoded or� The Final Result: Form Field Values Are Collected in an Object for Use as JSON. At this point, we’ve built a small script that will extract the values from a form as an object literal, which can easily be converted to JSON using JSON.stringify(). We can test by filling out our form with dummy data and submitting it.

Posting JSON with an HTML Form � System Overlord, Instead of capturing form data as essentially an array of key-value pairs this document, please send them to public-html@w3.org (subscribe, archives). the information will simply be captured as keys in a JSON object:. 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.

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);

W3C HTML JSON form submission, HTML forms can send an HTTP request declaratively. back-end (the code which is executed on the server), you can send JSON/XML and process them To send form data with XMLHttpRequest , prepare the data by Using this object is detailed in Using FormData Objects, but here are two examples:� Send JSON Data from the Client Side. Create a JavaScript object using the standard or literal syntax. Use JSON.stringify() to convert the JavaScript object into a JSON string. Send the URL-encoded JSON string to the server as part of the HTTP Request. This can be done using the HEAD, GET, or POST method by assigning the JSON string to a

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"
 }
}

Sending forms through JavaScript, In the frontend we are going to build a form which takes name and email html > . < head >. < title >. JavaScript | Sending JSON data to server. JavaScript Object Notation (JSON). It is a lightweight data transferring format. It is very easy to understand by human as well as machine. It is commonly used to send data from or to server. Nowadays it is widely used in API integration because of its advantages and simplicity.

How to send a JSON object to a server using Javascript , How to send a JSON object to a server using Javascript? How to convert JSON data to a html table using JavaScript/jQuery ? Export JSON to CSV file in Angular � The FormData object lets you compile a set of key/value pairs to send using XMLHttpRequest. It is primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to multipart/form-data.

How to send data of HTML form directly to JSON file?, This article will guide you on how to use serialize JSON with Html forms. you on how to use serialize JSON jquery to serialize Form Data and post it (or Zepto) that serializes a form into a JavaScript Object, using the same� JSON is a lightweight data interchange format; JSON is language independent * JSON is "self-describing" and easy to understand * The JSON syntax is derived from JavaScript object notation syntax, but the JSON format is text only. Code for reading and generating JSON data can be written in any programming language.

How to Serialize Html Form to JSON, HTML Table. Make an HTML table with data received as JSON: xmlhttp. setRequestHeader("Content-type", "application/x-www-form-urlencoded"); The following algorithm encodes form data as application/json. It operates on the form data set obtained from constructing the form data set. Let resulting object be a new Object. For each entry in the form data set, perform these substeps: If the entry's type is file, set the is file flag.

Comments
  • Take a look at $.ajax and serialize in the jQuery API.
  • Does it absolutely have to be a JSON object? What structure should the object have?
  • @AnthonyGrist Yes it has to be a JSON cause it's addressed toward a ReST service.
  • What does "doesn't seem to work" mean? Remember, we can't see your screen.
  • @Konos5 - REST has nothing to do with JSON. It doesn't require that data be in any particular format.
  • You've tagged question with jQuery. So are you using it ? with $.ajax it's really easy to pass this data.
  • OK, so how do I fix this?
  • @Quentin : In my case I need cross domain POST without domain control.
  • @user2284570 — If you have a new question, then ask one.
  • There is a proposal for adding enctype='application/json' to the form definition to create JSON data w3.org/TR/html-json-forms
  • @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.
  • Exactly type="button" is very important, if not use then it redirect with url params.