Home > Enterprise >  Relative URL path in form action not working
Relative URL path in form action not working

Time:06-02

I'm a making a form but clicking on that form's submit button doesn't take me to the right path.

<form action="delete" method="post">
    <button type="button">Cancel</button>
    <button type="submit">Delete</button>
</form>

It should take me to http://localhost:5000/<id>/delete (In place of will be the user ID)

But it takes me to http://localhost:5000/delete

And http://localhost:5000/<id>/delete is a webpage not a file. Which means that this web site is not static, it's dynamic.

What am I doing wrong here?

CodePudding user response:

Note: Assuming your delete is a file and it is in the same directory (id/) as your current html file.

A little thing about paths:

  • pathname is absolute. This means it will search in the root directory for pathname. (in this case the root folder of your webapp)
  • ./pathname is relative. The . means the current directory (aka the directory your file (e.g. index.html) is in).
  • ../pathname is also relative. The .. means one folder over the current folder you are in.

Example:

rootFolder/
  test.html
  anotherFolder/
    otherFile.html
  folder/
    index.html
    delete.html

Now assuming you are in folder/

  • test.html -> Valid
  • ./test.html -> Does not exist since . == rootFolder/folder/
  • ../anotherFolder/otherFile.html -> Valid, since .. goes one folder up (from folder/ to rootFolder) and then enters anotherFolder/otherFile.html

The exact same principles also apply when you open your terminal and cd (change directory) around. You can try out that the path works there first.

To answer your question, it should be: action="./delete" you are using an absolute path right now.

CodePudding user response:

You should try to extract the ID from the URL and then set that ID into your form action like:

follow this stackoverflow question to extract ID from url How can I get query string values in JavaScript?

<form action="/<id>/delete" method="post">
    <button type="button">Cancel</button>
    <button type="submit">Delete</button>
</form>
  •  Tags:  
  • html
  • Related