HTML form does not submit correctly - html

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:

Related

FastAPI: Is there a way to use an HTML form to act as the path parameters for an endpoint?

I have a GET function written to grab a file from an endpoint given namespace and project parameters. It looks a little something like this:
#app.get('/{namespace}/{project}')
async def get_project(namespace, project):
# this then uses the response module...
I want submitted content of my HTML form to become the {namespace} and {project} values, but I can't find a way to do so. So far, my code looks like this:
<form action="/{namespace}/{project}" enctype="multipart/form-data" method="get">
<input type="text">
<input type="submit">
</form>
Is there any way to do this with just HTML and FastAPI?
You can receive it in the post method.
Why are you using the GET method?
And if you need to use GET method, you can you
<a herf="/{namespace}/{project}"> </a>
I hope it will help you to solve this issue.

HTML form request body empty - NodeJs

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

Input field in GET form: don't supply parameter in URL?

I'd like to submit a form using GET but without passing the value of an input field in the URL.
(Some background may be helpful: I'd like to use a form so that the user can enter their name and press Enter in order to proceed, but all I actually want them to do is go to the next page, and it's important the URL doesn't have parameters in.)
Currently the displayed URL of the next page /nextpage?username=fred:
<form name="entername" action="/nextpage" method="get">
<label for="name">Enter your name: </label>
<input id="username" name="username"><br/>
<input id="submitme" type="submit" value="Submit" class="button"></form>
Is there a way it could go simply to /nextpage instead?
I guess "use POST" is one answer, but I'd rather avoid that if possible (because then if the user refreshes the next page, they get a scary 'Resubmit information?' alert).
So I'm just wondering if there's any other way besides POST.
The proper solution will be to make a POST request, and when you process it, to redirect the user to the answer page, thus causing the user's browser to make a GET request to it.
This ensures that if the user refreshes his answer page, it will not cause a resubmition alert . See more detailed description of this POST/REDIRECT/GET pattern
The somewhat hacky solution will be to use onsubmit javascript handler, which will set some cookies reflecting the form input fields, and then will remove the fields, so that they will not appear in the user's urlbar. The server should then read the submited values from the cookies.
Here is an example of the cookie hack, using jquery and a php script as a backend processor:
<?php
//unsets the cookie:
setcookie('username', "", time() - 3600);
?>
<!DOCTYPE html>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<form name="entername" action="" method="get">
<label for="name">Enter your name: </label>
<input id="username" name="username"><br/>
<input id="submitme" type="submit" value="Submit" class="button">
</form>
<script>
function js_setcookie(c_name,value){
document.cookie=c_name + "=" + escape(value);
}
$(function(){
$('form').submit(function(){
var username=$("#username").val();
js_setcookie("username", username);
window.location = ""; // "" means GET the same page ... change it to whatever backend URL you want instead, for example "http://..../nextpage" .
return false; // prevent the default event handler that will make a GET request with a query string in it.
});
});
</script>
<?php
echo "<pre>";
var_dump(isset($_COOKIE['username'])?"Cookie: ".$_COOKIE['username']:"Cookie is not set.");
echo "</pre>";
?>
</body>
</html>
You could delete the input field using Javascript with an onsubmit handler.
You can implement an iframe, and in that iframe you do the dirty stuff. That is really old school and not really an nowdays pattern.
I would save all information inside a Cookie or Session, from page to page using Ajax. And not post nor get, just link to the next step.
If you need to get the value on the server you can catch the value in the script "/nextpage" then make a redirect to a page without parameters. But i don't like this workaround. Better use POST or process form with help of JavaScript/Ajax.
That is simply impossible. It is just how GET requests work. You use the query part of the URL for passing parameters.

Passing arguments to POST Method

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"

Multipart upload form: Is order guaranteed?

It appears that when I use an html form to make a "Content-Type: multipart/form-data" POST request, the fields always appear in the order in which they are listed in the HTML. In practice, do all browsers do this?
The primary motivation for wanting to know this is so I can do server-side validation of form data w/o being required to cache the entire HTTP request in RAM | disk first.
I know CGI, PHP, etc typically won't do anything 'til the upload completes. Probably because RFC 2388 section 5.5 addresses this issue by saying the order is not defined. I'm working w/ a highly customized fork of thttpd and handling the upload w/ C code built right into the server. So I don't care what most servers do.
What I want to know, is if I go out on a limb and assume an order, will I get burned by that assumption?
Take this form for example:
<form id="formUpload"
target = "uploadTarget"
method = "post"
action = "/bin/upload"
enctype= "multipart/form-data" >
<input type="hidden" id="inUser" name="user" />
<input type="hidden" id="inDest" name="dest"/>
<input type="file" id="inFile" name="file" />
<input type="button" value="Upload" onclick="uploadFile();" />
<iframe id="uploadTarget" name="uploadTarget" src="" style="width:0;height:0;border:0px"/>
</form>
The 'uploadFile()' function will fill in the user & dest fields before invoking submit(). I would like to validate user & dest server side as well, before recv()-ing the entire HTTP request body.
Yes:
The parts are sent to the processing agent in the same order the corresponding controls appear in the document stream. Part boundaries should not occur in any of the data; how this is done lies outside the scope of this specification.
http://www.w3.org/TR/html4/interact/forms.html#h-17.13.4