Relative URL path in form action not working

Question

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?

• Moebius: It will lead you to localhost:5000/id/delete only if your current URL is localhost:5000/id. Try to put this in action: "/id/delete"
• Tuilip Sharma: @Moebius The id in URL is actually a placeholder for user ID. I thought it's not relative to the question so I didn't add it before but now I updated the question.

Answer 1

The behavior @Tuilip experienced is because of the relative path in the form action attribute. The relative path in action will always replace anything after the last slash in the URL.

Example for the form action "delete":

• If the URL is "/items/123" - the result will be "items/delete"
• If the URL is "/items/123/" – the result will be "items/123/delete"

Answer 2

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>

Answer 3

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.

• Tuilip Sharma: Oh sorry I forgot to specify in my question that delete is a page and not a file. I'll edit my question now.
• Quentin: pathname is absolute — No, it isn't. That's /pathname you're thinking of. pathname and ./pathname are equivalent.