I was tring to create an API POST using Node.js and express. I was just trying to post some data using html form:
<form id="myform" action="http://localhost:4000/add" method="post" enctype="application/json">
<input type="text" name="name" id="name" />
<input type="submit" id="submit" />
</form>
The server would just receive the POST request and display the body into console.log.
router.post('/add', function (req, res){
console.log("request: "+JSON.stringify(req.body));
})
What is being received at the console is:
request: {}
Trying to post into the same api using Postman - raw, JSON(application/JSON), things work fine.
Can someone please tell me what is wrong with what I am doing?
Browsers do not support submitting HTML forms as application/json. Most browsers would probably ignore the value and send the form as the default enctype which is application/x-www-form-urlencoded. To parse that, you'd need to use an appropriate middleware. One such example is the body-parser module's urlencoded() middleware.
In action attribute you don't need to specific the host just specify path such as "/add".
Related
I have a project in which I am using a basic sign up page for a user to enter their details.
I am using express JS at the backend
In this, I am also asking them to upload a picture. But for the picture to be uploaded, I need to make the enctype of the form as multipart/form-data. The image gets uploaded, but the problem is that none of the other data is recorded.
This is the html:
<form action="/create" method="POST" class="profile" enctype="multipart/form-data">
<input type="file" name="profile_image" class="img_upload" /><br><br><br>
<div class="name_age" >
<input type="text" name="name" class="name" placeholder="Full name">
<b class="age"> Age </b>
<input type="date" name="age" class="age"/>
</div>
<input type="submit" name="submit" value="Update Profile" class="button"/>
</form>
And this is expressJS code for handling it:
app.post('/create',(req,res)=>{
var d = req.body
console.log(d)
upload(req,res,function(err){ //this is a multer function to store the image
if(err)
res.end(err)
else{
res.end('success')
}
})
})
The console.log(d) returns an empty object. Without multipart/form-data the image doesn't get uploaded,but the rest of the data gets recorded.
How do I solve this issue?
I actually tried this as well in my project some months ago and got a similar problem with busboy as well as multer. You can have a onclick event on the button where you can have a setTimeout of 3,4 seconds (the usual time it will take to upload the image and send response) and send the text fields in the body in the ajax request to your url /create. Or just ditch the post request using the <form> tag and just send the image as well as the text fields in the ajax request. Hope it helps
I am using Laravel for my back end.
This does not work
<form action="/promo/update" style="background-color: #fafafa" method="GET">
This works
<form action="/promo" style="background-color: #fafafa" method="GET">
Is there something about using a GET and an extra "/"?
.. Is there something about using a GET and an extra "/"?
Short answer? No.
As others have noted, just make sure your routes file is expecting the correct parameters. I'd also suggest reading here to learn about PUT vs POST, and here to learn about form method spoofing.
Generally speaking, an UPDATE endpoint should be a POST or PUT. That's not your question though, so I'll just stick to answering what you have here.
Routes/web.php
Route::get('/promo/update', 'PromoController#update')->name('promo.update');
Blade
<form method="GET" action="/promo/update">
#csrf <!-- remember to pass your token -->
<input type="text" name="foo" id="foo" class="form-control" />
<button type="submit" class="btn btn-primary">Submit Form</button>
</form>
PromoController
public functon update( Request $request )
{
// Process your data
}
Because your route's method (/promo/update) is post and you use get...You can see available routes methods just by run below code in terminal:
php artisan route:list
First, make sure you have made the route in your routes file.
Second...
Laravel automatically generates a CSRF "token" for each active user session managed by the application. This token is used to verify that the authenticated user is the one actually making the requests to the application.
Anytime you define an HTML form in your application, you should include a hidden CSRF token field in the form so that the CSRF protection middleware can validate the request. You may use the #csrf Blade directive to generate the token field:
I want to make a simple HTML webpage and use a form on that page to upload an object to my server on parse.com
For example, if this is my form:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
Then I assume I would want some kind of post request, but I don't know how to set that part up with Parse.
Thanks in advance.
You need to do this using the REST API at Parse. You should find all the info you need in the guide:
https://www.parse.com/docs/rest
The form should have the following arguments:
<form action="some_page.php" method="get">
using get will show the sent data from inputs in the url, post will hide.
See this tutorial for more information about forms http://www.w3schools.com/php/php_forms.asp
In my JSP file I have a HTML form that sends data via GET to my servlet.
<form method="GET">
<input name="cmd" type="hidden" value="firstValue"/>
.....
</form>
If I now trigger a different form having also a variable called cmd, but using POST, the old cmd value will stay in the parameter list I can read out in my servlet like this: request.getParameterValues("cmd").
<form method="POST">
<input name="cmd" type="hidden" value="secondValue"/>
.....
</form>
Why can the GET parameters survive several requests? Where/how are the they stored in contrast to the POST parameters in the servlet?
When not specified, the form's action URL defaults to the current request URL as you see in browser's address bar, including the query string. If you'd like to avoid that, explicitly specify the action URL.
Is that possible to pass arguments to a HTML form in POST method by modifying the URL? If so how can I do it?
Arguments in the URL will be passed via the GET method. To pass via POST, you need to construct and post a form.
If you wish to dynamically add fields to a form, you can do this by creating a new hidden input element in Javascript and appending it to your form. JSFiddle demo here.
No, that's impossible.
The GET method is passed via the URL. The POST method is sent using a form. You can in fact use both at the same time.
no, that's not possible.
"The HTML specifications technically define the difference between "GET" and "POST" so that former means that form data is to be encoded (by a browser) into a URL while the latter means that the form data is to appear within a message body."
http://www.cs.tut.fi/~jkorpela/forms/methods.html
You can do something like this:
<form method="POST" action="http://example.com?this=that">
<input type="text" name="textfield">
</form>
and retrieve the this=that value server-side. But generally speaking, mixing GET queries in a url with a POSTed form is generally frowned on. Especially if you've got duplicated field names in the url AND the form body.
I strongly recommend using a javascript library, such as jquery but here's the old school:
<script type="text/javascript">
function fillForm() {
document.getElementById('myText').setAttribute('value', 'some value for myText');
// this would send the form:
// document.getElementById('myForm').submit();
return true;
}
</script>
<form method="POST" action="formHandler.php" id="myForm">
<input type="text" id="myText" name="myText" value="" />
<input type="submit" value="Send" />
</form>
<button onclick="fillForm();">Fill it!</button>
There is a way in which you could pass arguments to POST method in bash(command line of course). Use wget tool. example :- wget somewebsite.com/login --post-data="username=name&password=password"