Weather API - Add parameters to HTML form with GET - html

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>

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.

HTML form that causes a GET request

Basic question. If I have a form in my HTML (where in my case someone inputs a date), how can I have my users cause a GET request with the contents of that form instead of a POST.
e.g. form entry (e.g date)... so 20190312
what I am trying to achieve is such that AFTER the user submits the form.. the user is the lead to page that has
GET domain.tld/scriptname.php?variable=20190312
and then the system then processes the GET request accordingly.
thank you
Maybe i'm missunderstanding what you are asking.
This can easly be achived using builtin GET method in FORM tag
<body>
<form id="form" method="GET" action="scriptname.php">
<input id="date-txt" type="text" name="date">
<input id="search-btn" type="submit" value="Submit">
</form>
</body>
While filling up above field ad clicking "Submit" form will be submitted and you can see in your url path/or/page/scriptname.php?date=INPUT_FIELD_VAL
for every input in #form with a name, if GET method is used, you'll see a ?name=value in the url
What you describe is the default behaviour of a form. If you don't want a POST request, then don't use a method attribute to set the request type to POST.
<form action="//domain.tld/scriptname.php">
<input name="variable" value="20190312">
<button>Submit</button>
</form>

How to send textarea value as a parameter in a POST request

I am trying send the value of a textarea using a Post method when a button is clicked.
Code is very simple:
<html>
<head>
</head>
<body>
<form action="/editFile" name="confirmationForm" method="post">
<textarea id="confirmationText" class="text" cols="86" rows ="20" name="confirmationText" form="confirmationForm">
<out value="#{user.getFileContent}"/>
</textarea>
<input type="submit" value="Email" class="submitButton" id=""/>
</form>
</body>
</html>
To get this data when this request is done I am using CWF web framework and the methode is very simple:
void editFileController::doPost(CWF::Request &request, CWF::Response &response) const
{
QString out = request.getParameter("confirmationText");//this will give me the value of the widget "confirmationText" from HTML
QString out1 = request.getParameter("confirmationForm");
}
In order to get value of a filed this is done in this way:
<input type="file" name="test"/>
request.getPatameter("test"); //all works ok
But for the first example (the one with textarea) I can't set it to send the value of textarea when button is pushed.
Can anyone give me some ides about how I can fix this? This frameworks know only to give me the value for a specific name. So, somehow I should set the value of the button with the value of the textarea when this is pushed.
Thank you.
The textarea needs to belong to the form you are submitting.
Since you have form="confirmationForm", it belongs to the form with id="confirmationForm" which doesn't exist.
Remove the form attribute from the <textarea> start tag.
Your form has name="confirmationForm". The name attribute served a similar purpose to the id attribute before HTML standardized on id for client-side references to elements when HTML 4 came out in the late 1990s.
Two decades later, there is no reason to give elements name attributes for client-side purposes.
(Giving form controls like <textarea> name attributes for the purposes of submitting data for server-side use is still correct).

Input field in GET form: don't supply parameter in URL?

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.

Passing arguments to POST Method

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"