105
rated 0 times
[
109]
[
4]
/ answers: 1 / hits: 16855
/ 5 Years ago, thu, october 24, 2019, 12:00:00
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> userId: </b></label>
<input type = number class = add_input id=new_userId name=new_userId value = >
<br>
<label class = add_label><b> title: </b></label>
<input type = text class = add_input id=new_title name=new_title value = >
<br>
<label class = add_label><b> body: </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> userId: </b></label>
<input type=number class=add_input id=new_userId name=new_userId value=>
<br>
<label class=add_label><b> title: </b></label>
<input type=text class=add_input id=new_title name=new_title value=>
<br>
<label class=add_label><b> body: </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>
More From » html
