How to send a JSON object using html form data

Question

So I ve got this HTML form    lt html gt   lt head gt  lt title gt test lt  title gt  lt  head gt   lt body gt       lt form action  myurl  method  POST  name  myForm  gt           lt p gt  lt label for  first name  gt First Name  lt  label gt           lt input type  text  name  first name  id  fname  gt  lt  p gt            lt p gt  lt label for  last name  gt Last Name  lt  label gt           lt input type  text  name  last name  id  lname  gt  lt  p gt            lt input value  Submit  type  submit  onclick  submitform    gt       lt  form gt   lt  body gt   lt  html gt    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    lt script type  text javascript  gt      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

User · Answer

I found a way to pass a JSON message using only a HTML form.

This example is for GraphQL but it will work for any endpoint that is expecting a JSON message.

GrapqhQL by default expects a parameter called operations where you can add your query or mutation in JSON format. In this specific case I am invoking this query which is requesting to get allUsers and return the userId of each user.

{ 
 allUsers 
  { 
  userId 
  }
}

I am using a text input to demonstrate how to use it, but you can change it for a hidden input to hide the query from the user.

<html>
<body>
    <form method="post" action="http://localhost:8080/graphql">
        <input type="text" name="operations" value="{&quot;query&quot;: &quot;{ allUsers { userId } }&quot;, "variables":  {}}"/>
        <input type="submit" />
    </form>
</body>
</html>

In order to make this dynamic you will need JS to transport the values of the text fields to the query string before submitting your form. Anyway I found this approach very interesting. Hope it helps.

User · Answer

You can try something like   lt html gt   lt head gt       lt title gt test lt  title gt   lt  head gt    lt body gt       lt form id  quot formElem quot  gt           lt input type  quot text quot  name  quot firstname quot  value  quot Karam quot  gt           lt input type  quot text quot  name  quot lastname quot  value  quot Yousef quot  gt           lt input type  quot submit quot  gt       lt  form gt       lt div id  quot decoded quot  gt  lt  div gt       lt button id  quot encode quot  gt Encode lt  button gt       lt div id  quot encoded quot  gt  lt  div gt   lt  body gt   lt script gt      encode onclick   async  e    gt            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  quot  encoded quot   innerHTML   text            document querySelector  quot  encoded quot   innerHTML    First name     data firstname   lt br  gt                                                             Last name     data lastname   lt br  gt                                                            Age        data age               formElem onsubmit   async  e    gt          e preventDefault          var form   document querySelector  quot  formElem quot            var form   document forms 0            data               firstname   form querySelector  input name  quot firstname quot     value            lastname   form querySelector  input name  quot lastname quot     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  quot  decoded quot   innerHTML   text          lt  script gt   lt  html gt

User · Answer

you code is fine but never executed  cause of submit button  type  submit   just replace it by type button   lt input value  Submit  type  button  onclick  submitform    gt    inside your script  form is not declared   let form   document forms 0   xhr open form method  form action  true

User · Answer

The micro-library field-assist does exactly that  collectValues formElement  will return a normalized json from the input fields  that means  also  checkboxes as booleans  selects as strings etc

User · Answer

The accepted answer is out of date  nowadays you can simply add enctype  quot application json quot  to your form tag and the browser will jsonify the data automatically  The spec for this behavior is here  https   www w3 org TR html-json-forms

User · Answer

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

User · Answer

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    lt form action  myurl  method  POST  name  myForm  gt           lt p gt  lt label for  first name  gt First Name  lt  label gt           lt input type  text  name  name first   id  fname  gt  lt  p gt            lt p gt  lt label for  last name  gt Last Name  lt  label gt           lt input type  text  name  name last   id  lname  gt  lt  p gt            lt input value  Submit  type  submit  gt       lt  form gt    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

User · Answer

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

[javascript] How to send a JSON object using html form data

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to json

Examples related to forms