CODEWITHSUNDEEP
javascripthtmljsonrest
vytaute
vytaute

Reputation: 1480

How to POST data to JsonPlaceholder fake server?

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>

Upvotes: 3

Views: 22024

Answers (2)

saintlyzero
saintlyzero

Reputation: 1852

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

Upvotes: 4

arisalsaila
arisalsaila

Reputation: 429

  1. 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() ...

  2. 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.

Upvotes: 2

Related Questions