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?

It will lead you to http://localhost:5000/id/delete only if your current URL is http://localhost:5000/id/. Try to put this in action: "/id/delete" — Moebius, Jun 01 '22 at 11:56
@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. — Tuilip Sharma, Jun 01 '22 at 12:16

score 1 · Answer 1 · answered Jun 01 '22 at 11:56

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.

Oh sorry I forgot to specify in my question that `delete` is a page and not a file. I'll edit my question now. — Tuilip Sharma, Jun 01 '22 at 12:10

score 0 · Accepted Answer · answered Jun 01 '22 at 12:16

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>

2 Answers2