How to make sure form's relative URL works? - html

This is my webpage
www.domain.com/product/1
To update the product, I should submit to this URL
www.domain.com/product/1/update
In the product page, I have these forms to submit data
<form method="post" action="update">
<input type="submit" />
</form>
<form method="post" action="./update">
<input type="submit" />
</form>
Both forms do not work, because it will submit to
www.domain.com/product/update
They only work if URL is
www.domain.com/product/1/
If I hard code the product id in action
<form method="post" action="1/update">
<input type="submit" />
</form>
Then www.domain.com/product/1/ will not work, because it will submit to www.domain.com/product/1/1/update
What value should the action be to make sure the form can submit to correct URL?
If it is possible, I don't want to render absolute path or product id in form action.

As it stands to ensure this works in all situations you will need to use the product ID, like so: /product/1/update.
Another option, though, would be to make a couple of tweaks server side to make sure directory URLs always have a trailing slash.

You cannot achieve what you are asking for.
You have to specify either an absolute path or the product id.
You could generate the the product id programatically though.

You're having trouble because the action path product/1 is treated like a file not a directory, if the 1 had a slash after domain.com/product/1/ then you wouldn't have any problems. Like #sumitb.mdi suggested a base meta tag will work.
You're possibly using a framework, you might be able to utilise a URL builder function for 'named routes' or something.

Related

HTML Form as link is corrupting the adress

i assume this is a noob question, so sorry.
I'm trying to write this HTML-Page with a "form" that will work like a link on my raspberry pi.
So I used this code:
<form action="http://192.168.178.62/graph.pl?type=week">
<input type="submit" value="Blah" />
</form>
But instead of ending up at the adress I wrote in the code, I end up here: http://192.168.178.62/graph.pl? ("type=week" is missing, its just cut off)
Why is that, and how can I fix it?
thanks a lot!
When you submit a form with method="GET" (which is the default) then a new query string will be generated from the names and values of the successful form controls (since you don't have any, it will be empty). The new (empty) query string will replace the one in the action.
Options:
Use a link. (This is the best option. You aren't collecting any data from the user. You aren't making a POST request).
Move the data from the action to <input type="hidden" ...> elements.

Sending a delete request to the url in an anchor tag

How would I send a delete request to the specified URL (in the href attribute).
Delete
So far, I have tried method = "delete" as an attribute in the anchor tag. I can get it to work by making a button like so,
<form action = "/apartments/<%= #apartment.id %>" method = "post">
<input type="hidden" name="_method" value="delete" />
<button type="submit">Delete</button>
</form>
However, I'd prefer to keep it a link so that it is uniform with Edit, View Details, and other similar actions that appear with this particular item.
I'm using Sinatra.
Thanks!
You cannot use an anchor tag (at least without JS). Links are meant to be idempotent.

Any way to force a form to submit fields differently without using Javascript?

I have a form:
<form method="GET">
<input type="text" value="hello" name="myname" />
</form>
If this form is submitted, I will end up at:
example.com/?myname=hello
What I would prefer is that when this gets submitted, I end up at:
example.com/hello
Is this possible?
No, you cannot change the way form submission works in HTML. (Using JavaScript, you can do transactions in a different way, without using HTML form submission.) When using method="GET", the URL gets constructed in a specific way; when using method="POST", the URL does not contain submitted data at all (it is sent outside the URL).
There is a trick that changes form submission in one way, but not quite the way you want. If the name of a control is isindex, then the control name and the equals sign are omitted; but the question mark is still there. That is, <input type="text" value="hello" name="isindex" /> would result in http://www.example.com/?hello. And Chrome has broken this when they removed the remainders of support to the isindex element.
If, for some special reason, you really need to make a form create requests like http://example.com/hello, then the simplest way is to set up a very simple server-side script that accepts normal requests that result from HTML forms and just passes them forward after modifying the URL in a simple way.

Form submission without parameter name

<form action="/foo">
<input type="text" name="q">
<input type="submit" >
</form>
In the previous HTML, if the user types in 'bar' and clicks the button it would submit to example.com/foo?q=bar.
How can I make it go to example.com/foo/bar?
I can easily do it with JS but I'm trying to stick to HTML.
There is no way to do this in HTML, you need a programming language.
Have something on the server process the form an issue an HTTP 301 response with a Location header.
You could enhance that by use the form's submit event to prevent the default action and set location in JS.
You cannot change the value of the action attribute with HTML only. You need to use JS or any other scripting language.

how to: question mark in form action

I want to use a button to link to a page. However, the page url is something like domain.com/page?action=register.
I really need this action added to my:
form action="domain.com/page?action=register"
Form attribute, but when I try it with these settings, it will only go to domain.com/page
I've tried encoding the ? into %3F but that doesn't work.
Any help?
The ? values are set by the form, as long as the form's method is set to "get" (rather than "post", which doesn't submit the values in the URL). So, if you want to submit a form to page?action=register, you'd do the following:
<form action="domain.com/page" method="get">
<input type="hidden" name="action" value="register">
It will also pass the other form values along in the URL, creating something like:
domain.com/page?action=register&first_name=john&last_name=doe
EDIT: As #ninetwozero mentioned in a comment, the scenario you describe above should work:
<form action="domain.com/page?action=register" method="post">
[rest of form]
I just tested the above and it passed both the ?action=register and the form values from my form. So, whichever you prefer.
Is "domain.com/page" the page that has the form and button?
Make sure that your button is like this:
<input type="submit" />
Not
<input type="button" />
Otherwise, you could actually use input type "button" with a javascript redirect.
<input type="button" onclick="location.href="domain.com/page?action=register" />
In fact, why use a bunch of form elements if all you want is a button to send you to another url?
<form>
<input type="button" onclick="location.href="domain.com/page?action=register" />
</form>
Not sure if you even need the tags really. Try it.