I'd like to submit a form using GET but without passing the value of an input field in the URL.
(Some background may be helpful: I'd like to use a form so that the user can enter their name and press Enter in order to proceed, but all I actually want them to do is go to the next page, and it's important the URL doesn't have parameters in.)
Currently the displayed URL of the next page /nextpage?username=fred:
<form name="entername" action="/nextpage" method="get">
<label for="name">Enter your name: </label>
<input id="username" name="username"><br/>
<input id="submitme" type="submit" value="Submit" class="button"></form>
Is there a way it could go simply to /nextpage instead?
I guess "use POST" is one answer, but I'd rather avoid that if possible (because then if the user refreshes the next page, they get a scary 'Resubmit information?' alert).
So I'm just wondering if there's any other way besides POST.
The proper solution will be to make a POST request, and when you process it, to redirect the user to the answer page, thus causing the user's browser to make a GET request to it.
This ensures that if the user refreshes his answer page, it will not cause a resubmition alert . See more detailed description of this POST/REDIRECT/GET pattern
The somewhat hacky solution will be to use onsubmit javascript handler, which will set some cookies reflecting the form input fields, and then will remove the fields, so that they will not appear in the user's urlbar. The server should then read the submited values from the cookies.
Here is an example of the cookie hack, using jquery and a php script as a backend processor:
<?php
//unsets the cookie:
setcookie('username', "", time() - 3600);
?>
<!DOCTYPE html>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<form name="entername" action="" method="get">
<label for="name">Enter your name: </label>
<input id="username" name="username"><br/>
<input id="submitme" type="submit" value="Submit" class="button">
</form>
<script>
function js_setcookie(c_name,value){
document.cookie=c_name + "=" + escape(value);
}
$(function(){
$('form').submit(function(){
var username=$("#username").val();
js_setcookie("username", username);
window.location = ""; // "" means GET the same page ... change it to whatever backend URL you want instead, for example "http://..../nextpage" .
return false; // prevent the default event handler that will make a GET request with a query string in it.
});
});
</script>
<?php
echo "<pre>";
var_dump(isset($_COOKIE['username'])?"Cookie: ".$_COOKIE['username']:"Cookie is not set.");
echo "</pre>";
?>
</body>
</html>
You could delete the input field using Javascript with an onsubmit handler.
You can implement an iframe, and in that iframe you do the dirty stuff. That is really old school and not really an nowdays pattern.
I would save all information inside a Cookie or Session, from page to page using Ajax. And not post nor get, just link to the next step.
If you need to get the value on the server you can catch the value in the script "/nextpage" then make a redirect to a page without parameters. But i don't like this workaround. Better use POST or process form with help of JavaScript/Ajax.
That is simply impossible. It is just how GET requests work. You use the query part of the URL for passing parameters.
Related
I simply want to submit a HTML form with GET in order to redirect to another URL. However, when submitting, the GET method adds a question mark.
I am using form-input as parameters for the URL, so POST is not an option (I think). Likewise, the form should be able to take a input from the user and then redirect based on that. I am using Metaweather API, which requires ending on /api/location/(woeid)/, hence I can't allow question mark from GET method. Currently, I have no luck adding any parameters other than question mark.
Example of valid URL: https://www.metaweather.com/api/location/44418/ (Notice: no question mark)
HTML
<!DOCTYPE html>
<html>
<body>
<form method="GET" target="_blank" action="https://www.metaweather.com/api/location/">
<input type="text" placeholder="Location..">
</form>
</body>
</html>
Desired outcome: If you write "44418" in input, you will be redirected to https://www.metaweather.com/api/location/44418/
Note: I already have the CORS/XMLHttpRequest/JSON.parse working, I am only trying to enable users to submit/search for a location themselves.
TL;DR: How do I (enable users to) add parameters to a URL without question marks and other "side effects" of GET method?
Thank you very much in advance.
solution for you problem:
<form method="GET" target="_blank"
action="https://www.metaweather.com/api/location/"
onsubmit="location.href = this.action + this.txt.value; return false;">
<input type="text" id="txt" name="txt" placeholder="Location..">
</form>
I have an html form and I'm trying to use an anchor tag in its GET request, so that the user will be sent to a specific part of the page. I have it set up like this:
<form action="www.website.com/page/" method="get">
<select name="foo">
<option value="bar#myAnchor">Sample</option>
</select>
<input type="submit" value="Submit" />
</form>
The user is redirected to www.website.com/page/?foo=bar%23myAnchor.
Instead, I want to get the same result as the user following a direct link Link
I haven't been able to find the problem, but it seems like a browser issue since I can't get around it with an html entity or any other alternate coding.
What do you think?
I think you have to use javascript. A simple implementation might look like this.
function goToUrl(){
var url = 'http://' + window.location.hostname + '/' + document.querySelector('#urlSelector').value;
window.open(url);
//you could set window.location.href as well
}
<select id="urlSelector">
<option>bar#myAnchor</option>
</select>
<button onclick="goToUrl()">Submit</button>
.
This is expected. Whenever we submit a form, the values are URL encoded. Hence, in your case, when the form is submitted, the URL becomes
www.website.com/page/?foo=bar%23myAnchor
If you open the network tab, you can see this is the encoded version of foo=bar#myAnchor
If you just want the user to go to a link, use anchor tags and change the href property based on your logic.
Hope that helps!
I have found an entry in html file
'<form action="?" ... '
I do not understand what it does.
Search in Google returned no results. Actually it is a Django template file, but I didn't find anything in django template documentation.
It uses the current URL with an empty query string as the action of the form. An empty query string. Empty. Meaning no query string at all. The query string will be no more. It will not be used. It will be gone. There will be no more query string after submitting the form. The query string will have vanished. Disappeared. Gone away. Become no more.
The action= atrribute has only value. i.e URL.
In simple english once your form is processed and you hit a submit button or enter you will be redirected to the URL you give to the action attribute
Example:
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
In the case of you question, if the action is "?" then the returned hash-string will be current URL plus "/?" appended which will take you back to the same page you were on.
action="" will resolve to the page's address. action="?" will resolve to the page's address + ?, which will mean an empty fragment identifier.
Doing the latter might prevent a navigation (new load) to the same page and instead try to jump to the element with the id in the fragment identifier. But, since it's empty, it won't jump anywhere.
Usually, authors just put # in href-like attributes when they're not going to use the attribute where they're using scripting instead. In these cases, they could just use action="" (or omit it if validation allows).
'<form action="?" ... ' strips the query string off of the URL when submitting the form, and submits the form to the current document address (i.e. itself).
Here is what that means:
Let's use the following URL as example:
ExampleSite.com**?SearchTerm1=chocolate&SearchTerm2=cake**
This URL contains the query string
'?SearchTerm1=chocolate&SearchTerm2=cake'
and sends that query string to the web site server, attached to the URL.
Sometimes, you want to ensure that the URL being passed to the server is stripped of any query strings (i.e. the query is string is removed completely) and only the URL is passed.
Let's say you bookmarked the page, using the full URL and query string ExampleSite.com?SearchTerm1=chocolate&SearchTerm2=cake****
Now you get to that page, and there is a search form.
You decide to use the search form to search for something new...
'<form action="?" ... ', as used above, removes the query string from the URL when the form is submitted, and submits the form to the same page that it came from (usually a 'controller' (a page with programming that determines what to do with the information sent to it by the user) ).
<form name="test" action="process.php" method="get">
<input type="submit" value="Submit">
The action used here will take you to the process.php page after clicking the submit button.
In short the action= is used to go to the specified page(mentioned in the action=) after filling the form and submitting.
When we don't know the url to go by submit the form we can specify
like this, It will reload the same page by appending question mark(?)
to url.
I.e, Form is submitted for same page itself. It identifies
form is reloaded.
Note: We can leave action property blank, even though it will work!
action is an attribute used in forms to specify the URL of the file that will process the input control when form is submitted
Is that possible to pass arguments to a HTML form in POST method by modifying the URL? If so how can I do it?
Arguments in the URL will be passed via the GET method. To pass via POST, you need to construct and post a form.
If you wish to dynamically add fields to a form, you can do this by creating a new hidden input element in Javascript and appending it to your form. JSFiddle demo here.
No, that's impossible.
The GET method is passed via the URL. The POST method is sent using a form. You can in fact use both at the same time.
no, that's not possible.
"The HTML specifications technically define the difference between "GET" and "POST" so that former means that form data is to be encoded (by a browser) into a URL while the latter means that the form data is to appear within a message body."
http://www.cs.tut.fi/~jkorpela/forms/methods.html
You can do something like this:
<form method="POST" action="http://example.com?this=that">
<input type="text" name="textfield">
</form>
and retrieve the this=that value server-side. But generally speaking, mixing GET queries in a url with a POSTed form is generally frowned on. Especially if you've got duplicated field names in the url AND the form body.
I strongly recommend using a javascript library, such as jquery but here's the old school:
<script type="text/javascript">
function fillForm() {
document.getElementById('myText').setAttribute('value', 'some value for myText');
// this would send the form:
// document.getElementById('myForm').submit();
return true;
}
</script>
<form method="POST" action="formHandler.php" id="myForm">
<input type="text" id="myText" name="myText" value="" />
<input type="submit" value="Send" />
</form>
<button onclick="fillForm();">Fill it!</button>
There is a way in which you could pass arguments to POST method in bash(command line of course). Use wget tool. example :- wget somewebsite.com/login --post-data="username=name&password=password"
I have a form to sign up to getting a rss feed through Feedburner.
this is the code -
<form action="http://feedburner.google.com/fb/a/mailverify" method="post">
<p><input name="email" type="text" /></p>
<input name="uri" type="hidden" value="dafyomi" /><input name="loc" type="hidden" value="en_US" /><input type="submit" value="click here to send" /></form>
<p> </p>
I want it to also sent the form data to a new window, and also change the window the user is on now - to a thank you page on the site.
Any ideas?
Thanks!
In clean HTML — impossible.
You can use JavaScript for this but it's ugly, breaks usability and probably most browsers will block it thinking you're trying to show an advertisement.
And as forcing opening a new window/tab/whatever is getting deprecated too, some browser may even ignore your ‘new window’ and try to open the thing in current tab. This would lead to undefined behavior of it trying to open two things in same window.
You may think about using one target page and <object/> or frames to display another if that's important. But that's not very usable too.
PS. And in all cases, the form can be submitted only to one of the pages. The second one will be plain GET.
I would like to suggest to use jQuery Ajax Form Plugins for this case. You can done two actions with one form submit by this way...
$('form').submit(function() {
$(this).ajaxSubmit({
url: myurl, //ajax request to myurl
success: function() {
return true; //submit form
}
});
return false;
});
I would add the "Thank you!"-phrase to the results page - after all, it can only be a line or two long, right?
If you feel that is not an option, you might want to do the something like this instead:
Form submits to server, and relevant data required to view the results page are saved in a Session
Redirect to Thank You-page, with a link to the results page.
Link triggers GET-request for the results page, and the results can be shown thanks to the Session variable.
If the page should only be available once, abandon the session.