I am trying to make a way to send data from a basic html form to mongodb using express. but it's giving me null when I post it.
I used the following Schema : commentname: String.
Here's the HTML:
<form id="form" onsubmit="return false;">
<input type="textbox" id="cmt-1" placeholder="comment here"/>
</form>
<button type="button" onclick="submit()" class="submit">
submit
</button>
JS:
var cmt = document.getElementById('cmt-1').value;
var comment = {commentname: ''};
comment = {commentname: cmt};
function submit () {
async function postData (url = '', data = {}) {
const response = await fetch(url, {
method: 'POST',
mode: 'same-origin',
cache: 'no-cache',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data) // body data type must match "Content-Type" header
});
return response.json(); // parses JSON response into native JavaScript objects
}
postData(
'https://realtime-comt-system-100.glitch.me/comments/add',{comment}
)
.then(data => { console.log(data); });
}
What am I missing?
just try this code but check the url i put . don't put the whole url just put the path name .
also take this code copy and paste , the html and the java script take them both because i changed both of them
var form = document.getElementById('form');
form.addEventListener('submit', async(e) => {
e.preventDefault();
let cmt = form.cmt.value;
let data = {commentname: cmt};
const response = await fetch('/comments/add', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
}).then(res =>{
console.log(res)
}).catch(err){
console.error(err)
}
})
<form id="form">
<input type="textbox" id="cmt-1" name='cmt' placeholder="comment here"/>
</form>
<button type="submit" onclick="submit()" class="submit">
submit
</button>
The problem is not being caused by the code posted above.
It's a Mongoose problem. You are trying to create two documents with the same id, when that id has been specified unique to Mongoose.
This is what the code is posting in the body to the backend, a JSON string:
{"comment":{"commentname":"my sample comment"}}
The fact that you're posting an object inside an object looks suspicious. This pattern would be more common:
{"commentname":"my sample comment"}
But since there is no backend code posted, it's impossible to tell if this is correct.
When I tried posting {"comment":{"commentname":"my sample comment"}} to the backend URL using Postman, I received the following response code:
400 Bad Request
The response body:
"Error: MongoError: E11000 duplicate key error collection: database.comments index: commentname_1 dup key: { commentname: null }"
From Mastering JS - Debug E11000 Errors in Mongoose
MongoDB's E11000 error is a common source of confusion. This error occurs when two documents have the same value for a field that's defined as unique in your Mongoose schema.
Mongoose models have an _id field that's always unique.
Related
I was checking out this answer.
It's basically a request to Mailchimp to send a confirmation email to the user when they submit their email.
The code works perfectly with jquery. But I don't like jquery. And it's kind of annoying to have to add it just for this tiny snippet, since I won't be using it in the rest of my project. I already tried "translating" this into vanilla javascript using fetch but it doesn't seem to work.
function register($form) {
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize(),
cache : false,
dataType : 'json',
contentType: "application/json; charset=utf-8",
error : function(err) { alert("Could not connect to the registration server. Please try again later."); },
success : function(data) {
if (data.result != "success") {
// Something went wrong, do something to notify the user. maybe alert(data.msg);
} else {
// It worked, carry on...
}
}
});
}
EDIT
Some suggested I should add the HTML form:
I am doing all this because I want to send the user email to my MailChimp subscription list. But I want it to do it directly from my website without redirecting to the Mailchimp subscription page.
<form action="https://herokuapp.us5.list-manage.com/subscribe/post-json?u=070e69e5e3e6e664a8066e48f&id=0bf75ac6c4&c=?" method="get" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate newsletter__form" target="_blank">
<label for="mce-EMAIL">Ingresa tu correo electrónico:</label>
<input type="email" placeholder="ejemplo#gmail.com" value="" name="EMAIL" class="required textfield email__textfield" id="mce-EMAIL">
<input type="submit" value="suscribirme" name="subscribe" id="mc-embedded-subscribe" class="button raise">
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_070e69e5e3e6e664a8066e48f_0bf75ac6c4" tabindex="-1" value=""></div>
</form>
I also found out jquery ajax method get accepts the data argument but it takes what's inside of the data and adds it to the URL. So it's still a get request with no body. I am trying to find a way to do that but with fetch but somehow the jquery URL has things I don't know where they come from. I also tried doing this with POST method and fetch but apparently, the server doesn't allow that.
For what is worth this is how the URL generated by jquery request looks like:
https://herokuapp.us5.list-manage.com/subscribe/post-json?u=070e69e5e3e6e664a8066e48f&id=0bf75ac6c4&c=jQuery35105022544193369527_1633147928440&EMAIL=email123456%40gmail.com&b_070e69e5e3e6e664a8066e48f_0bf75ac6c4=&_=1633147928441
And this is how I can trick my URL to look like with fetch. Here I get a CORS error
https://herokuapp.us5.list-manage.com/subscribe/post-json?u=070e69e5e3e6e664a8066e48f&id=0bf75ac6c4&c=?&EMAIL=paula.uzcategui68%40gmail.com&b_070e69e5e3e6e664a8066e48f_0bf75ac6c4=
And this is what I'm doing with fetch
function register(form) {
data = new FormData(form);
data = Object.fromEntries(data);
data = Object.entries(data);
let arroba = /#/gi;
let action = form.getAttribute("action")+ "&"+ data[0][0] +"="+ data[0][1].replace(arroba, '%40') + "&" + data[1][0] + "=" + data[1][1]
// console.log(action)
fetch(action, {
method: 'get',
cache: 'no-cache',
headers: {
'content-type': 'application/json; charset=utf-8'
},
})
.then(response => response.json())
.catch(error => {
alert("Could not connect to the registration server. Please try again later."+ error)
});
}
Try this, it is the exact solution for your question (I hope). If you still get stuck please comment down, I will explain.
async function register(form) {
let data = new FormData(form);
data = JSON.stringify(Object.fromEntries(data)); // convert formdata to json
let response = await fetch(form.action, {
method: form.method,
body: data,
cache: 'no-cache',
headers: {
'content-type': 'application/json; charset=utf-8'
}
})
.then(response => response.json())
.catch(error => {
alert("Could not connect to the registration server. Please try again later.")
});
}
So i would like to send Whatever i type in my input bar in to be sent to whatever api link via post method. But whenever i send it i get {} . The problem is when i dont send anything in the input bar A.K.A left blank and press submit i still get {}. But when i type gibberish its still {} . So i assume whatever i typed in is not being sent to the api link.
Also when i hard code something like body: JSON.stringify(this.myForm) it shows up as a response in the back end. So i believe i error lies withing this body of my fetch request. heres my code what should i put for the body.
<html>
<body>
<h1>Draft V0.1</h1>
<form class="form" id="myForm">
<label for="skill">add skill</label>
<input type="text" name="skill" id="skill">
<button type="submit">Submit</button>
</form>
<script>
const myForm = document.getElementById('myForm')
myForm.addEventListener('submit', function (e) {
e.preventDefault();
const formData = new FormData(this);
fetch('https://fj5s3i60a8.execute-api.us-east-1.amazonaws.com/updateSkill', {
method: 'post',
body: JSON.stringify(new FormData(myForm)),
headers:
{
"Content-Type": "application/json; charset=utf-8",
"Accept": 'application/json'
}
}).then(function (response) {
console.log(response)
return response.json();
});
});
</script>
</body>
</html>
Note I was blindly playing around with the body to see what i can parse through it but i would end up getting cors errors.
Thank you in advance
const thisForm = document.getElementById('myForm');
thisForm.addEventListener('submit', async function (e) {
e.preventDefault();
const formData = new FormData(thisForm).entries()
const response = await fetch('https://reqres.in/api/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(Object.fromEntries(formData))
});
const result = await response.json();
console.log(result)
});
<html>
<body>
<h1>Draft V0.1</h1>
<form class="form" id="myForm">
<label for="skill">add skill</label>
<input type="text" name="skill" id="skill">
<button type="submit">Submit</button>
</form>
</body>
</html>
This was my attempt to perform a patch request on an HTML form from the frontend to MongoDB database via NodeJS API.
This is a Nodejs API structure
app.route("/requests/:rollno")
.get(function(req, res) {
// get method to find a query
})
.patch(function(req, res) {
Request.update({
rollno: req.params.rollno
}, {
$set:req.body
},
function(err) {
if (!err) {
res.send("Successfully updated requests");
}else{
res.send(err);
}
}
);
});
On the frontend side of the form
<%- include('partials/header') %>
<h1>Recent requests</h1>
<% for(let i = 0; i < posts.length; i++) { %>
<article>
<form action="/requests/21" method="PATCH">
<input type="text" name="status[0]">
<div id="participant"></div>
<br>
<button type="button" onclick="addParticipant()">Add</button>
<button type="button" onclick="delParticipant()">Remove</button>
<div class="btn-block">
<button type="submit" href="/success">Submit Request</button>
</div>
</form>
</article>
<% } %>
The form is not actually updating the information on the actual server. But with the postman, the data is getting updated.What's the best resolution for the same or is there any alternate method for the same ?
<form action="/requests/B194057EP" method="PATCH">
This is invalid, HTML forms method attribute only supports GET and POST method. <form method="put"> is invalid HTML and will be treated like a GET request.
Now to solve this, you can make use of Jquery AJAX to send data from the client-side to your backend.
$.ajax({
url: '<api url>',
type: 'PATCH',
data: {
data: sendData
},
success: function () {
}
})
;
In vanilla JS, you can use promises, as well as async/await to do so, this is a basic example of it.
async patching() {
const responseFlow = await fetch(URL, {
method: "PATCH",
headers: {
'Content-Type': 'application/json'
},
// The content to update
body: JSON.stringify({
name: "New name"
})
})
}
In Vuejs, I have a picture drag and drop code. I have tried, without success, to send the file to NodeJS using FormData and axios like many example in the web e.g.
export default function(url, file, name = "avatar") {
const formData = new FormData();
formData.append(name, file);
const config = {
headers: {
'Content-Type': 'multipart/form-data'
}
};
return axios.post(url, formData, config);
};
The issue come from the client side not from server
see https://github.com/expressjs/multer/issues/548
and
https://gist.github.com/HarshithaKP/ebc0e79800e5638fe827c157360378be
I also tried with a classic input and it works
<form ref='uploadForm'
id='uploadForm'
action='https://localhost:4000/api/upload/picture'
method='post'
encType="multipart/form-data">
<input type="file" name="sampleFile" />
<input type='submit' value='Upload!' />
</form>
I came to the conclusion : the header of Axios is incomplete.
Some people advice to complete the header by using the form-data library https://github.com/form-data/form-data
headers: {
...form.getHeaders(),
'Content-Type': 'multipart/form-data'
}
But in form-data, the library use for client the classical object FormData (https://developer.mozilla.org/fr/docs/Web/API/FormData) without the function getHeaders(). It doesn't exist. In the code, we have
module.exports = typeof self == 'object' ? self.FormData : window.FormData;
QUESTION
How can I populate properly the header in order that the server reconize the POST with a file ? A kind of a getHeaders() function.
I'm writing automation software in JavaScript within TamperMonkey.
My script does few AJAX requests which return HTML that I parse using a DOMParser. I was wondering if it was possible to submit these forms without having to actually open the newly returned HTML in the main page.
Yes. You need to get your form from the document body, create a FormData object and set field values, and send a POST request.
For simplicity sake I used the Fetch API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API. I also assumed that the credentials also needed to be passed from the same origin.
fetch('<GET URL>', {method: "GET", credentials: 'same-origin'})
.then((response) => (response.text()))
.then((responseBody) => {
var html = htmlBody(responseBody);
var form = html.querySelector('#my-form'); // whatever your form is called
var formData = new FormData();
formData.append('someName', 'someValue'); // the field name will probably come from your form fields
postForm(formData)
.then((response) => (response.text()))
.then((responseBody) => {
// whatever with the form post response
});
})
function htmlBody(string) {
var document = new DOMParser;
return document.parseFromString(string, 'text/html').body;
}
function postForm(formData) {
return fetch('<POST URL>', {
method: 'POST',
body: formData,
credentials: 'same-origin'
})
}