Normally an HTML form sends query parameters as key-value pairs like this:
http://blabla/?something=something&this=that
But what I need is a form that generates a URL with one of the query keys omitted:
http://blabla/?something&this=that
As far as I can tell, a missing or empty name attribute does not quite provide what I expect:
<input type="hidden" name="" value="myvalue"/>
Leads to this, with an equals sign that I don't want:
http://blabla/?=myvalue
I know it's not good practice to do this, but I need to interface with an existing poorly-designed system.
If you need the attribute to not have a value, shouldn't you do something like this instead?
<input type="hidden" name="something" value=""/>
which would produce the URL http://blabla/?something=&this=that that you are looking for, only with the '=' after something. Or, just leave it out entirely (ie, do not define an input type hidden) and you would get the URLhttp://blabla/?this=that ...
Maybe I'm missing the point here, but either just don't submit that value or set it to null prior to submitting the form. It's not good practice to have an input without a name, so keep the name.
Obviously, we don't know how the script that accepts the form input is setup, but in my experiences unless some sort of crazy server-side validation was setup, it shouldn't bark at you.
These answers make sense logically, but unfortunately this system is very picky about which characters it will accept and any spurious equals signs give it trouble. It's an Innovative Interfaces library OPAC, by the way.
I figured out one way to do it, which is by not submitting the form at all but using JavaScript to inject the contents of the text box into a dynamically-generated URL and then opening that using window.location:
<form name="search_form" method="get" action="">
<input type="text" size="30" maxlength="100"/>
<input type="submit" value="Search" />
</form>
<script type="text/javascript">
window.onload = function() {
document.search_form.onsubmit = function() {
var term = document.search_form.elements[0].value;
var url = "http://blabla/search/X?d:(electronic books) and ("
+ term + ")&searchscope=1";
window.location = url;
}
}
</script>
I don't do much JavaScript and this will certainly cause alarm to anyone mindful of accessibility and web standards compliance. However, rest assured it is no worse than any of the rest of the javascriptaghetti that is part of this system.
Related
Is there any way to validate inputs in the form using HMTL?
For example:
<input type="text" class="input-text error"
aria-required="true" placeholder="Enter your name *"
aria-invalid="true" required />
If user adds a special character to input, an error message saying "Characters are not allowed" should be shown below the input box.
First of all, client-side form validation is the greatest feature coming with the HTML5. Client-side form validation helps you to ensure data submitted matches the requirements. To get more detail about it you can visit here.
Important Note
Client-side form validation is an initial check, You should not use data coming from the form on the server side without checking it. It just a feature for good user experience. Because client-side validation is too easy to manipulate, so users can still easily send data that you do not want to on your server.
Solution
In this question, the best solution is; using HTML attribute pattern. The pattern attribute defines a regular expression the form control's value should match. To get more detail about pattern attribute you can visit the this page.
Below regexp you need.
^[a-zA-Z0-9]{5,12}$
It works like that;
It should contains only alphanumeric.
Minumum 5 and maximum 10
character.
You can use below code to integrate it with input field.
<form action="">
<input type="text" name="name" required
pattern="[a-zA-Z0-9]{5,12}" title="No special character">
<input type="submit">
</form>
Usually, to check inputs from html tags, you can create a javascript function to check your needs which is called everytime the user type in your input with the "onkeyup()" function.
The "onkeyup" keyword will trigger the function everytime user type in your field
<input type="text" onkeyup="myFunctionToCheck()">
<script>
myFunctionToCheck(){
//Here check your needs
}
</script>
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.
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.
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.