I have a form, text input and a submit button. How do I append the value of the text box to the form action i.e.
action="https://www.mywebsite.com/" & txtSessionId
The form looks like this:
<form name="form1" method="post" action="https://www.mywebsite.com/">
<label>Your Sessions ID:
<input type="text" name="txtSessionId" id="txtSessionId">
</label>
<label>
<input type="submit" name="btnContinue" id="btnContinue" value="Continue">
</label>
</form>
I want the link to look like this: https://www.mywebsite.com/123456
where 123456 is typed into the text box by the user.
Thank you
You'd have to either use javascript or something server-side to do that (or both).
Javascript:
<form name="form1" method="post" action="https://www.mywebsite.com/"
onsubmit="location.href = this.action + this.txtSessionId.value; return false;">
Server-side (PHP)
if (!empty($_POST['txtSessionId']))
{
header('Location: https://.....' . (int)$_POST['txtSessionId']);
exit();
}
The correct behavior is to send the input field to the existing form, process it, and redirect. You don't know if the user sent a valid input value yet!
In this cases I always recommend javascript unless accessibility is an strict requirement for you.
I assume you are using something like mod-rewrite on your server if you are accepting URLs like this. So, why not just write a rule on there to check if txtSessionId is set and then re-write it to whatever you'd like?
I don't know how to write mod-rewrite rules all that well, but, I definitely know you can do it.
If you're using PHP, Greg did present a fairly viable alternative to using mod-rewrite (or something similar).
Related
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.
My form is like this:
<form method="GET" action="target">
<input type="text" name="filter"/>
<select name="skill">
<option>opt1</option>
<option>opt2</option>
<option>opt3</option>
</select>
<input type="number" name="level"/>
<input type="submit"/>
</form>
I would like the empty parameters not to be shown in the URL when the form is submitted, and this happens with the skill field , but not with level and filter, which are added to the Query string even though they're empty. How does it happen? Is it possible to prevent this from happening without using javascript?
None of these fields is required to submit the form.
This is not possible without javascript.
You can use something like jQuery to accomplish this.
note: Using form method POST is the preferred way of submitting forms, and the parameters are submitted as http request body and not in the URL.
If you do a form POST instead of GET, the form params will not appears in the query string. But that would require back end changes.
I have a button that is this <button id="btnSubmit">Submit</button> the problem is, I want the form tags to use this id so that is designed the way I want. And also this code, I have a few questions.
<form action="demo_form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
what is the action="demo_form.php",input type="submit" do? And does the input type has any other "What do you call this stuff" besides submit?
The action="demo_form.php" sets the action, in this case, "navigate to file demo_form.php and send it the data".
<input type="submit" (...) > creates and element which submits the form e.g. executes the "action".
The method sets the way the data is submitted to the target of the action ("form_demo.php"), in this case get, which allows you to refer to the submitted data as $GET["name"] in PHP.
Possible input types are listed here.
You either give your <input type="submit" (...) > the id="btnSubmit" property or use javascript to submit the form after an event has been triggered.
MOr info on that is available here (i short: document.<get_the_form_element>.submit();).
I suggest you to take a look at this link. It describes all the basic concepts about how using forms. And you can also find a lot of information by Googling it.
The action attribute
The action attribute defines the action to be performed when the form is submitted.
The common way to submit a form to a server, is by using a submit button.
The input attribute
<input type="submit"> defines a button for submitting a form to a form-handler.
The form-handler is typically a server page with a script for processing input data.
If i understand your question correctly, these are my answers.
action
The action attribute describes the page to which the contents of the form are sent to. So if you have a sign up form with an input for an email, the text that is typed will be sent to the action path. It will be sent using the method described in the method attribute. So you can find your values in either the $_POST variable, or the $_GET variable, get is easy for being able to share the url and post is great for private information.
input
The input element is the actual way to input information (who guessed it). You've got an input of the type text for just text input, you've got checkbox for a true or false input and way way more see: w3schools
why don't you use
<input type="submit" value="Submit" id="btnSubmit">
Or if you want to use a button
<button id="btnSubmit">Submit</button>
Then from jquery or js you can submit the form.
And for this question,
what is the action="demo_form.php",input type="submit" do?
You should probably google it out. This is so basic.
Anyway, just a concise explanation:
action is the attribute where you will specify the code that will handle the form data submitted and input type="submit" will display a button in the page, clicking on it will submit the form.
There are a lot of types in input, the most common ones are
text
password
submit
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.
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.