I have been trying to create a simple web app where you can post images and a little description. It is for an Instagram Clone project. I am using multer and express on the backend to parse the body and the file, and it works perfectly fine. The problem is on the frontend. I provide a form where you put name, description and the image to upload, then with the Fetch API I send the body to my api on the backend.
I noticed that the page reloads every time I submit the form despite the use of event.preventDefault() and event.stopPropagation() for the form sumbit event.
In addition, I have realised that it does so only when also uploading the file, in fact, if I leave the name and description alone, it doesn't reload the page, whereas if I live the file upload in there it just reloads it.
Is this a bug of the fetch API or am I not considering something?
Here's the code on the frontend that handles the fetch request to my api:
const instaForm = document.getElementById("post-pic");
instaForm.addEventListener("submit", (event) => {
event.preventDefault();
event.stopPropagation();
let instaFormData = new FormData(instaForm);
let url = `${baseUrl}/create-insta`;
fetch(url, {
method: "POST",
body: instaFormData,
})
.then((data) => data.json())
.then((response) => {
instaForm.reset();
console.log(response);
})
.catch((err) => console.error(err));
});
Consider that if I leave the input for the file blank, the page doesn't reload so it is definitely a problem with the file upload.
For now, for debugging my API is sending back a simple "Received" response and nothing else.
HTML Form
<form method="POST" id="post-pic" enctype="multipart/form-data">
<input
type="text"
id="name"
name="name"
placeholder="Enter a name..."
/>
<textarea
name="description"
id="description"
rows="10"
placeholder="A short description..."
></textarea>
<input type="file" id="picture" name="insta" />
<button id="publish" type="submit">Publish</button>
</form>
You should catch the event when clicking on the form button.
Try this:
<form method="POST" id="post-pic" enctype="multipart/form-data">
<input
type="text"
id="name"
name="name"
placeholder="Enter a name..."
/>
<textarea
name="description"
id="description"
rows="10"
placeholder="A short description..."
></textarea>
<input type="file" id="picture" name="insta" />
<button id="publish" type="button">Publish</button>
</form>
JS Script:
const instaForm = document.getElementById("post-pic");
const buttonForm = document.getElementById("publish");
buttonForm.addEventListener("click",(event) => {
event.preventDefault();
let instaFormData = new FormData(instaForm);
let url = `${baseUrl}/create-insta`;
fetch(url, {
method: "POST",
body: instaFormData,
})
.then((data) => data.json())
.then((response) => {
instaForm.reset();
console.log(response);
})
.catch((err) => console.error(err));
});
}
I hope it could help you.
Regards.
Related
I'm using NodeJS/Express and EJS to create a form to an API route. But I'm having a trouble connecting my post route(which contents an id) with the ejs form. How can i add the id to the ejs.
This is my post route
router.post('/:id/new', upload.single('file'), async (req, res) => { //here i'm trying to add project id to the url
//const project = await Project.findById(req.params.id)
const releasenoteData = {
user : await req.user._id,
title: req.body.title,
path: req.file.path,
originalName: req.file.originalname,
description: req.body.description,
createdAt: req.body.createdAt,
}
try {
const releasenote = await ReleaseNote.create(releasenoteData)
console.log(releasenote)
res.redirect('/')
} catch {
if (releasenoteData.path != null) {
res.redirect('/new', {
errorMessage: 'Error Creating the Release Note'
})
}
}
})
Now I want to connect the above post route with a ejs form and get the relevant data from it. How can I do that with the project id in the route.
<form action="/new" method="POST" enctype="multipart/form-data"> //here before new id should be added i think
<label for="text">Title: </label>
<input type="text" id="title" name="title">
<br><br>
<label for="file">File: </label>
<input type="file" id="file" name="file" required>
<br><br>
<label for="text">Description: </label>
<input type="text" id="description" name="description">
<br><br>
<label for="date">Upload Date: </label>
<input type="date" id="createdAt" name="createdAt">
<br><br>
<button type="submit">Add Release Note</button>
</form>
The answer, confirmed by the OP as a working solution, is to drop the action part of the form. This makes the form POST to its default location
As per the spec:
[...]
Let action be the submitter element's action.
If action is the empty string, let action be the URL of the form document.
This means that if the form is first GET, action can be omitted and the url is preserved (actually this is handy if the url contains multiple parameters).
I am trying to make a post request to the server and do something with the response. Things seem to work on the server-side. The problem is that the page reloads upon completion of the response and I cannot do anything with the response.
The common suggestions are using button or preventDefault. These suggestions do not solve the problem: as you can see below, the input type is button (not submit) and preventDefault() on the event does not work.
Does anyone have an idea about what I am missing?
<form id="modelCodeForm">
<label for="codehere"></label>
<div id="modelAreaDiv">
<textarea id="modelArea" cols="60" rows="20">
stuff
</textarea>
<br>
<input id="submitUserModel" type="button" value="run on server">
</div>
</form>
function initializeUserModel(){
let model = document.getElementById("modelArea").value;
fetch('http://localhost:8080/', {
method: 'post',
headers: {'Content-Type': 'text/plain'},
body: model
})
.then(response => response.json())
.then(data => {
console.log(data);
}).then(console.log("received!"))
}
I got to the bottom of this. It turns out that the problem was due to VS Live Server which was detecting a change in the folder and hot-loading the app. The change was due to the backend, in the same folder, saving a log. Really silly thing to miss...
If you want to trigger your function when the form is submitted then you can use the "onsubmit" event listener available on HTML forms.
So you would do onsubmit="initializeUserModel(event)". You pass it the event object so you can call event.preventDefault() in the function and stop the page from reloading.
Change your input to type="submit" (or make it a button of type="submit") or the form submission won't be triggered.
<form id="modelCodeForm" onsubmit="initializeUserModel(event)">
<label for="codehere"></label>
<div id="modelAreaDiv">
<textarea id="modelArea" cols="60" rows="20">Stuff</textarea>
<br />
<input id="submitUserModel" type="submit" value="run on server" />
</div>
</form>
function initializeUserModel(event) {
event.preventDefault();
let model = document.getElementById("modelArea").value;
fetch("http://localhost:8080/", {
method: "post",
headers: { "Content-Type": "text/plain" },
body: model,
})
.then((response) => response.json())
.then((data) => {
console.log(data);
})
.then(console.log("received!"));
}
I'm using backend functions on my website to gather data from a separate website.
I can access the data easily with something like...
fetch( DataURL, {"method": "get"} )
.then( httpResponse => httpResponse.json() )
.then( json => { console.log(json); } )
However, there is additional data fields in the json data that aren't visible unless you are logged in.
I'm trying to use a POST fetch to complete the login form, and then send the GET to retrieve the API data afterwards. Have been unsuccessful so far.
fetch( LoginURL, {
"method": "post",
"body": "Username=myusername&Password=mypassword",
"headers": {"Content-Type": "application/x-www-form-urlencoded"}
})
.then( fetch( DataURL, {"method": "get"} )
.then( httpResponse => httpResponse.json() )
.then( json => { console.log(json); })
})
I'm basing the body data on what I see in the form in their source code. Not completely sure if I'm doing that right.
This is a phpBB style website that needs to be logged into.
<form action="./ucp.php?mode=login" method="post" id="navloginform" name="loginform">
<div class="form-group">
<input type="text" placeholder="Username" name="username" size="10" class="form-control" title="Username"/>
</div>
<div class="form-group">
<input type="password" placeholder="Password" name="password" size="10" class="form-control" title="Password"/>
</div>
<div class="form-group">
<div class="checkbox">
<label for="autologin-navbar"><input type="checkbox" name="autologin" id="autologin-navbar" tabindex="4" /> Remember me</label>
</div>
</div>
<input type="hidden" name="redirect" value="./ucp.php?mode=login" />
<button type="submit" name="login" class="btn btn-primary btn-block"><i class="fa fa-sign-in fa-fw" aria-hidden="true"></i> Login</button>
</form>
I'm very clearly doing something wrong.
I think my main issues I'm struggling with are:
Is my guess at how to use their form data correct?
How do I verify the login even worked to begin with?
Do I need to do something special to maintain the login before sending a second fetch?
Just going to share how I got mine working, though may be different for other cases.
--
Go to the website you're trying to login to, and open up your browser development tools.
Select the 'Network' tab, and login.
Find the network entry from your login, and go to the 'Headers' tab. Near the bottom of the entry will show which headers were used. Not all of these are critical. Something like below:
When using your fetch call, create the same headers as needed in the body.
const LoginURL = 'www.ExampleWebpageLogin.com./ucp.php?mode=login';
let form = new FormData();
form.append('username', 'MyUsername');
form.append('password', 'MyPassword');
form.append('login', 'Login');
var headers = { 'method': 'post',
'body': form,
'credentials': 'include'}
await fetch( LoginURL, headers)
.then( loginResponse => {
console.log(loginResponse);
})
In my case, the loginResponse included 2 critical cookies.
user_id - This cookie value remained =1 when not logged in, and was set to my user id once successful.
sid - Most likely session ID, which they use to preserve login session.
For both the login post and future GET requests, 'credentials' are required.
I'm creating a simple fetch post request from my <form> to a login.php file on my local server using XAMPP. The index.html index.js login.php files are all in the root directory.
My index.js is the below:
const myForm = document.getElementById("myForm");
myForm.addEventListener("submit", function(e) {
e.preventDefault();
const formData = new FormData(this);
fetch("login.php", {
method: "post",
body: formData
})
.then(response => {
return response.text();
})
.then(text => {
console.log(text);
})
.catch(error => {
console.log(error);
});
});
My index.html is:
<form class="form" id="myForm" action="">
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
<label for="password">Password:</label>
<input type="password" name="password" id="password" />
<button type="submit">Login</button>
</form>
And my login.php is:
<?php
var_dump($_POST);
?>
I simply just want to log to the console the responses to check the output and test my form, however when I fill out the form I get:
index.js:7 POST http://127.0.0.1:5501/login 405 (Method Not Allowed)
So this makes me think I need to set certain permissions on my Apache server. But I don't exactly know how to do this.
Or perhaps I'm missing something else. Can someone point me in the right direction?
It work on the xampp server http://127.0.0.1/example/index.html in htdocs folder
as the title says, I want to submit a form and update the values from the form (Mysql result) without refreshing the whole page.
See Image 1, I want if I press the blue button that the values updated.
Can someone help me?
Thanks.
If you are willing to use newer apis like Promise and fetch, it's super easy and neat.
foo.submit.addEventListener("click", (e) => {
e.preventDefault();
fetch("YOUR_URL", {
method: 'POST',
body: new URLSearchParams({
name: foo.user_name_value,
email: foo.user_mail.value
})
}).then(response => {
return response.json() // assume returning data is in json format, otherwise .text() could be used
}).then(data => {
// deal with return data
}).catch(err => {
// deals with errors
})
})
<form name="foo">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_mail">
</div>
<div>
<button name="submit" type="submit">Send your message</button>
</div>
</form>
Older method XHR shares same idea, but requires a bit more code. You may use axios or so to simplify the process.