How to POST data to JsonPlaceholder fake server?

Question

I want to fake new data insertion into a server using https://jsonplaceholder.typicode.com/ fake server. I am trying to send data using this tutorial https://jsonplaceholder.typicode.com/guide.html#Create_a_resource. But how do I know whether data was inserted or not? And am I doing insertion correctly by having a submit button in a form that is calling New() function on click? And form by itself goes to the same page on which it is displayed in (add.html).

function New()
{
 var userid = document.getElementById("new_userId").value;
 var new_title = document.getElementById("new_title").value;
 var userid = document.getElementById("new_body").value;
 
 fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: new_title,
    body: new_body,
    userId: userid
  }),
  headers: {
    "Content-type": "application/json; charset=UTF-8"
  }
   })
   .then(response => response.json())
   .then(json => console.log(json))
}

<html>

 <head>
 <link rel="stylesheet" type="text/css" href ="style.css">  
  <meta http-equiv="Content-Type"  charset="UTF-8" > 
 </head>
  
  <body>
 <h1>Please type in new item data:</h1><br>
 
 <form id = "add_form" method = "POST" action = "add.html">
     
 <label class = "add_label"><b>&nbsp;userId:&nbsp; </b></label>
 <input type = "number" class = "add_input" id="new_userId" name="new_userId" value = "">
 <br>
 <label class = "add_label"><b>&nbsp;title:&nbsp;</b></label>
 <input type = "text" class = "add_input" id="new_title" name="new_title" value = "">
 <br> 
 <label class = "add_label"><b>&nbsp;body:&nbsp;</b></label>
 <input type = "text" class = "add_input" id="new_body" name="new_body" value = "">
 
 <button id = "add_btn2" onclick = "New()" type = "submit">Submit</button>
 </form> 
   
 </body>

</html>

Thank you !

UPDATE: Thank you all for a help, I am adding a fixed and working code below. Input and labels stil needs to be wrapped into a form but the e.PreventDefault() must be used in a New(e) function.

<html>

<head>
  <meta http-equiv="Content-Type" charset="UTF-8">
</head>

<body>
<form>
  <h1>Please type in new item data:</h1><br>
  <label class="add_label"><b>&nbsp;userId:&nbsp; </b></label>
  <input type="number" class="add_input" id="new_userId" name="new_userId" value="">
  <br>
  <label class="add_label"><b>&nbsp;title:&nbsp;</b></label>
  <input type="text" class="add_input" id="new_title" name="new_title" value="">
  <br>
  <label class="add_label"><b>&nbsp;body:&nbsp;</b></label>
  <input type="text" class="add_input" id="new_body" name="new_body" value="">

  <button id="add_btn2" onclick = "New(event)">Submit</button>
  </form>
  
  <script>
    function New(e) {
   e.preventDefault() 
      var userid = document.getElementById("new_userId").value;
      var new_title = document.getElementById("new_title").value;
      var new_body = document.getElementById("new_body").value;

      console.log("Input Data: " + userid + " " + new_title + " " + new_body);

      fetch('https://jsonplaceholder.typicode.com/posts', {
          method: 'POST',
          body: JSON.stringify({
            title: new_title,
            body: new_body,
            userId: userid
          }),
          headers: {
            "Content-type": "application/json; charset=UTF-8"
          }
        })
        .then(response => response.json())
        .then(json => {
          console.log('response: ' + JSON.stringify(json));
        })
    }
  </script>
</body>

</html>

You will need to prevent the form from submitting, you can find examples for doing that [HERE](https://stackoverflow.com/a/24249452/1552587) — Titus, Oct 24 '19 at 06:46

score 4 · Accepted Answer · answered Oct 24 '19 at 07:23

The issue is the form.

Here's the working code:

<html>

<head>
  <meta http-equiv="Content-Type" charset="UTF-8">
</head>

<body>
  <h1>Please type in new item data:</h1><br>
  <label class="add_label"><b>&nbsp;userId:&nbsp; </b></label>
  <input type="number" class="add_input" id="new_userId" name="new_userId" value="">
  <br>
  <label class="add_label"><b>&nbsp;title:&nbsp;</b></label>
  <input type="text" class="add_input" id="new_title" name="new_title" value="">
  <br>
  <label class="add_label"><b>&nbsp;body:&nbsp;</b></label>
  <input type="text" class="add_input" id="new_body" name="new_body" value="">

  <button id="add_btn2" onclick="New()">Submit</button>
  <script>
    function New() {
      var userid = document.getElementById("new_userId").value;
      var new_title = document.getElementById("new_title").value;
      var new_body = document.getElementById("new_body").value;

      console.log("Input Data: " + userid + " " + new_title + " " + new_body);

      fetch('https://jsonplaceholder.typicode.com/posts', {
          method: 'POST',
          body: JSON.stringify({
            title: new_title,
            body: new_body,
            userId: userid
          }),
          headers: {
            "Content-type": "application/json; charset=UTF-8"
          }
        })
        .then(response => response.json())
        .then(json => {
          console.log('response: ' + JSON.stringify(json));
        })
    }
  </script>
</body>

</html>

Check the console to see the response

Thank you, I think that worked well! If I get such message in console it means that insertion was successfully faked, right? https://snipboard.io/TpOwrJ.jpg — vytaute, Oct 24 '19 at 10:06
Actually, if I wrap everything into a form and go to function New(e) on form submit (preventing default in a function), I dont get the red error as I showed you before in sang.gy link. I will add my final code in my question as and update. Thank you all for help! — vytaute, Oct 24 '19 at 10:10
@vytaute Yes, the `id:101` field from the response is generated by **JSONPlaceholder** — saintlyzero, Oct 24 '19 at 10:10

score 2 · Answer 2 · answered Oct 24 '19 at 07:18

First you need to prevent the form from submitting, if not it will refresh the page. You can try this:

In Form

... <button id = "add_btn2" onclick = "New(event)" type = "submit">Submit</button> ...

In function

function New(e) { e.preventDefault() ...
As stated here JSONPlaceholder Guide, the resource will not be really created. Successful request will return a json object based on form-data you've sent. Just check your browser log, check if the responses just like what the documentation said.

How to POST data to JsonPlaceholder fake server?

2 Answers2