1

Below is the Form component of my webpage

 <form action="/login" method="POST">    
        <h3>Traditional Form</h3>
        <div class="form-row">
          <label for="name"> enter name </label>
          <input type="text" name="name" id="name" autocomplete="false" />
        </div>
        <button type="submit" class="block">submit</button>
</form>

And this is the api handling POST request

const express = require('express');
let app = express()
 
app.use(express.static("./methods-public"))       // storing html file
app.use(express.urlencoded({ extended: false }))                 
app.use(express.json())

app.post('/login', (req, res) => {  
  if (req.body.name)
    return res.status(200).send(`we go the person ${req.body.name}`)

  res.status(401).send("Wrong user")
})

app.listen(2600, () => console.log("We are listening"))

Now this is just the beginning , but what I am observing is that whenever I try to submit any data, I am led to the webpage localhost:2600/login. Now I realize that upon submitting the form , the data is sent to POST method for /login to handle , but it is a POST method. Why and how am I redirected to localhost:2600/login by an POST method ?

I want to know WHY & HOW it redirects use to new webpage. What happens at the backend in the logic that it redirects use to new webpageCan anyone please explain how any why is it happening so ? Thank You

Brijesh Roy
  • 15
  • 7
  • Is it happening with this form only? or any link you are trying to click on any webpage? your code seems fine and should not redirect. Also, try to check if somehow your `ctrl` button is not pressed, it happens often – Ashish Ratan Mar 21 '23 at 04:19
  • It is happening with this form . And my ctrl button is not pressed. – Brijesh Roy Mar 21 '23 at 04:22
  • try adding target='_self' if does help – Ashish Ratan Mar 21 '23 at 04:25
  • This is just how typical HTML forms work. You click submit and are taken to the `action` URL. The method will either be `GET` or `POST` – Phil Mar 21 '23 at 04:28
  • Does this answer your question? [Understanding the "post/redirect/get" pattern](https://stackoverflow.com/questions/10827242/understanding-the-post-redirect-get-pattern). The answers outline the differences between a POST/REDIRECT/GET and a direct POST (what you're using) which should make things clearer for you – Phil Mar 21 '23 at 04:28
  • Not working , moreover I want to know the reason behind why it leads me to new webpage ? – Brijesh Roy Mar 21 '23 at 04:31
  • @Phil , it is explaining what happens on sending these requests . I am more in understanding the behind functioning of server. Like why and how it redirects to new page.Still it is a good thread . – Brijesh Roy Mar 21 '23 at 04:37

1 Answers1

0

This is how HTML forms work. When you submit the form, the browser navigates to (opens) the action URL.

  • If the method is GET, any form fields will be collected into the URL query string

    <form action="https://example.com/" method="get">
<input name="foo" value="FOO" />
<button type="submit">Go</button>
</form>

    GET https://example.com/?foo=FOO

  • If the method is POST, any form fields are collected into the request body

    <form action="https://example.com/" method="post">
<input name="foo" value="FOO" />
<button type="submit">Go</button>
</form>

    POST https://example.com/
content-type: application/x-www-form-urlencoded

foo=FOO

Either request will be sent to the server and the response rendered in the browser.

Note that the only valid methods for use in a form are get and post (well, and dialog).

For more information, see Sending form data

Phil
  • 157,677
  • 23
  • 242
  • 245
  • So you want to say that whether the method is POST or GET , one thing is for sure that is the website will be led to the URL page given in action tag , is it so ? – Brijesh Roy Mar 23 '23 at 10:31
  • That is correct. A common pattern is _post / redirect / get_ as illustrated in the post I linked earlier which avoids some of the issues with straight post requests – Phil Mar 23 '23 at 12:22