POST forms: How to put GET parameters in action attribute? [duplicate] - html

This question already has answers here:
When submitting a GET form, the query string is removed from the action URL
(13 answers)
Closed 1 year ago.
I have this form:
<!DOCTYPE html>
<html>
<body>
<form action="draft.html?test=1">
<button type="submit">Valid</button>
</form>
</body>
</html>
But when I click on valid it doesn't redirect to draft.html?test=1 but to draft.html. What am I doing wrong?
Thank you for your help.
EDIT: I know that I should favour <input type="hidden"> but I want to use it for a POST form.
EDIT 2: This is a stupid question, as soon as I change the method of the form to POST, the problem is resolved.

If you absolutely need to put it on action attribute you can use method="POST".
<!DOCTYPE html>
<html>
<body>
<form action="draft.html?test=1" method="POST">
<button type="submit">Valid</button>
</form>
</body>
</html>
Otherwise if you want to send your data trough GET use
<!DOCTYPE html>
<html>
<body>
<form action="draft.html" method="GET">
<input type="hidden" name="test" value="1">
<button type="submit">Valid</button>
</form>
</body>
</html>

When you submit a form with method="GET" (the default), the query string of the action is replaced with the data in the form.
Don't put the data in the action attribute. Put it in hidden input elements instead.
<form action=draft.html>
<input type=hidden name=test value=1>
<button>Valid</button>
</form>

Is this what you want?
<form action="draft.html">
<input type="hidden" name="test" value="1">
<button type="submit">Valid</button>
</form>

Related

fill url parameter value based on form input

I have a URL looks like this
site.com/dir/?id=xxx
is it possible to create an HTML form that allows the user to enter the value of id and opens the page in other tab?
thank you.
This is the very basic HTML code to do it :
<!DOCTYPE HTML>
<HTML>
<body>
<h1>The input element</h1>
<form action="https://www.google.com/dir/" target="_blank">
<label for="id">Enter value of ID:</label>
<input type="text" id="fname" name="id"><br><be>
<input type="submit" value="Submit">
</form>
<p>Click the "Submit" button to open page in new tab.</p>
</body>
</html>

Why do people put value="Submit" for button element in a form if it won't be posted

I have seen people do:
<form ..>
<button type='submit' value='Submit'>Sign Up</button>
</form>
Why do they need value='Submit' if it isn't even submitted to the server? Is it for accessibility?
Forms can have more than one submit button. If you also give each button a name, then you can use the value after submitting to see which one had been clicked.
<!DOCTYPE html>
<html>
<head>
<title>test submit</title>
</head>
<body>
<form action="#" method="get">
<button type='submit' name="clicked" value="thefirst">First</button>
<button type='submit' name="clicked" value="thesecond">Second</button>
</form>
</body>
</html>
If you submit this with the first button, the parameter posted will be clicked=thefirst, while with the second one it will be clicked=thesecond.
Of course in this case a much saner approach would be to give the buttons different names. but you get the idea.
All programmer use this. Because its is good understanding to another programmer to review already written code. It is not compulsory.

HTML Form does not submit with forward slash

I was developing a simple HTML form and I couldn't figure out why the following code works on Chrome but not in Firefox.
<!DOCTYPE html>
<html>
<body>
<form action="/hello.html" method="get">
<input type="submit" value="Submit">
</form>
</body>
</html>
After a while I figured out that the issue is the slash in the action url.
When the form action starts with a forward slash ('/'), the form is not submitted in firefox.
Without '/' from the action tag, pressing the 'submit' button results in a redirect to the hello.html page.
For me this behaviour is weird. I think it is valid to start a (relative) URL in the action attribute of a form tag with a forward slash.
Do you have some explanation for this behaviour?
It works in Google Chrome because Chrome is forgiving (or smart). What you actually mean is either:
<form action="hello.html" method="get">
or
<form action="./hello.html" method="get">
What's the difference to /hello.html?
Let's assume the URI of your file is file:///c:/somedir/index.html
./hello.html and hello.html both resolve to file:///c:/somedir/hello.html since they refer to the current directory.
But /hello.html resolves to file:///c:/hello.html because according to http://www.ietf.org/rfc/rfc2396.txt (page 16)
A relative reference beginning with a single slash character is termed
an absolute-path reference ...
The following example works. I am not sure why your code doesn't work.
<html>
<body>
<form action="/my-handling-form-page" method="post">
<div>
<label for="name">StackOverflow name:</label>
<input type="text" id="name" />
</div>
<label for="mail">Email:</label>
<input type="email" id="mail" />
</div>
</form>
</body>
</html>
However, when I removed <!DOCTYPE html> from your code, it started working too.

Send form to remote server

I want to use the service provided at http://zxing.org/w/decode.jspx with a custom form in my own site. I've written the following code:
<html>
<body>
<FORM action="http://zxing.org/w/decode.jspx" method="post">
<INPUT type="text" name="u" value="http://justinsomnia.org/images/qr-code-justinsomnia.png">
<INPUT type="submit" value="Send">
</FORM>
</body>
</html>
When I submit the form, I'd expect to see the results page with a "Decode Succeeded" message. Instead, I see the original remote form I'm trying to duplicate.
Can you spot what's wrong with my custom form?
<html>
<body>
<FORM action="http://zxing.org/w/decode" method="get">
<INPUT type="text" name="u" value="http://justinsomnia.org/images/qr-code-justinsomnia.png">
<INPUT type="submit" value="Send">
</FORM>
</body>
</html>
You should use get instead of the post method. You are posting to the wrong URL, post to http://zxing.org/w/decode. I checked it, it's working now.

how to search the given string in google using text input field?

Hi I am using this form code to enter get the text field. in that text field i will enter some string for search and i press submit button.when i click on submit button it show the search results in google search engine how to do this.
<!DOCTYPE html>
<html>
<body>
<form name="input" action="index.html" method="get">
Search:<input type="text" name="user">
<input type="submit" value="Submit">
</form>
</body>
</html>
Can anyone help me? Thanks In advance......
Simply imitate how Google does it. The key items are the action attribute and the use of the name q for the string:
<!doctype html>
<meta charset=utf-8>
<title>Google search</title>
<form action="http://www.google.com/search">
<label for=q>Keyword(s):</label>
<input type=text name=q size="32" id=q>
<input type="hidden" name="ie" value="utf-8">
<input type="hidden" name="oe" value="utf-8">
<input type="submit" value="Search">
</form>
You can use the Google Custom Search API for this.