JSON Data in an HTML form

Question

I have looked many places and even here on stack overflow, but I cannot find information on sending JSON data in HTML / JS in a PUT request. I have tried many things, but I have not yet found a way.

I have went online and found that you can use stringify() and XMLHttpRequest, I have tried the following with no success.

    <script>
        var xmlhttp = new XMLHttpRequest();
        var theUrl = "/";
        xmlhttp.open("PUT", theUrl);
        xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        xmlhttp.send(JSON.stringify({ "test": "my data"}));
    </script>

I currently am having to create a website, but I am currently required to send a PUT request to another website containing JSON data. Down below is a very simple representation of what I am trying to do.

<html>
  <body>
    <form action="https://www.theOtherWebsite.com" method="PUT">
       
      <!-- JSON data to send upon pressing submit -->

      <button type="submit" name="button">submit</button>
      
    </form>
  </body>
</html>

If anyone has information on a solution that would be great.

If I have to use a server, I could, but I would still need to somehow send this request to a third party website with the JSON data which I have not been able to find out how to do either.

Welcome to StackOverflow! Can you share what you've tried so far? Please update your question to show what you have already tried, showing the specific problem you are facing in a [minimal, complete, and verifiable example](http://stackoverflow.com/help/mcve). For further information, please see [how to ask good questions](http://stackoverflow.com/help/how-to-ask), and take the [tour of the site](http://stackoverflow.com/tour). — coagmano, Apr 08 '21 at 23:19
https://stackoverflow.com/questions/22195065/how-to-send-a-json-object-using-html-form-data — zoldxk, Apr 08 '21 at 23:23
's will always submit as form data - if you want to send JSON you'll have to use [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) / [`XMLHttpRequest`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) — Turtlefight, Apr 08 '21 at 23:26
https://stackoverflow.com/questions/8054165/using-put-method-in-html-form — ikiK, Apr 08 '21 at 23:26
Also why would you use HTML form method, use JS fetch PUT: https://medium.com/swlh/restful-api-design-get-post-put-patch-delete-a-walkthrough-with-javascripts-fetch-api-e37a8416e2a0 — ikiK, Apr 08 '21 at 23:31

score 1 · Answer 1 · answered Apr 08 '21 at 23:44

Thank you @ikiK and @Turtlefight for the answers. I couldn't find that method anywhere until you guys mentioned it, works.

<html>
  <body>
    <script>
      fetch("127.0.0.1:3000", {method:'PUT', headers:{
        'content-type': 'application/json'},
         'body': JSON.stringify({TestNumber:1, TestText: 'text'})
       });
    </script>
  </body>
</html>

This is a very simple sample of what I used and it works great, thanks again!

Mahmoud Y3c · Answer 2 · 2021-04-08T23:53:19.140

i think that http method not makes any deferant you can use any method you wants to but just check your code first because you are forgot to use event like onloadend or onreadystatechange anyway I will try to give you an example and i hope it's work for you

var obj = { "test": "my data"};
 obj = JSON.stringify(obj);
var xhr = new XMLHttpRequest();
xhr.onloadend = function (e) { 
   console.log(e)
}
xhr.open("PUT", url, true)
xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
xhr.send(obj)

JSON Data in an HTML form

2 Answers2