Help in choosing a tag for html
<select onchange ="----">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
I want to write this little piece of code wherien if a person selects any element then he has to go to the next html page showing which value will be selected.
How can i do this.
Hope my doubts are clear.
Any suggestions here would be appreciated ...
Thanks..
a source to share
All form fields have a property form
that you can easily use to access the element form
to submit.
You also need the attribute name
in the tag select
, or it won't work.
<select name="item" onchange="this.form.submit();">
Alternatively, you can navigate to another page by setting the window location by adding a value to the query string:
<select onchange="window.location.href='NextPage.html?item='+this.options[this.selectedIndex].value;">
a source to share
<select onchange="document.forms[0].submit();">
assuming it is the first form on the page (which it usually is). If not, you can change the index to the correct shape.
Good link Introduction to Forms .
Of course, you can do this using the jQuery library (my preferred option), but this is strictly optional as it can be done quite easily with standard Javascript.
a source to share
The attribute onChange
will accept a javascript expression or function. So it depends on what you want to do. If you need a dropdown value on the same page, you can access it using a Javascript snippet.
If, however, you want the value to be available on the next page (which the form attribute belongs to action
), you need to submit the form on a change event. In this case, you can do something similar to what @Cletus pointed out.
a source to share
<select onChange="redirect(this)">
<option value="html1.html" selected>1</option>
<option value="html2.html">2</option>
<option value="html3.html">3</option>
</select>
<script type="text/javascript">
function redirect(selSelectObject)
{
if (selSelectObject.options[selSelectObject.selectedIndex].value != "")
{
location.href=selSelectObject.options[selSelectObject.selectedIndex].value
}
}
</script>
Hope this helps you.
a source to share
You can do inline Javascript using onchange
in-element select
... but inline JS is a bad habit and should be avoided. Markup, i.e. (X) HTML, should be minimal and semantic, without any inline CSS or Javascript. It's good to separate your markup (HTML) from your layout (CSS) and your behavior (Javascript) as much as you can.
Store your Javascript inside a document, head
or better yet, as an external script called in head
. This has advantages both for keeping your markup clean and minimal, and for centralizing and externalizing your Javascript, which promotes code reuse and ease of maintenance.
A Javascript framework like jQuery will make things much easier and more reliable if you are not familiar with Javascript.
Also, keep in mind that this approach (onchange on a select) is poor for accessibility (even though you see it all over the web). For example, many keyboard-only users (and which include a lot of mobile phones) face the dreaded situation where they choose another option by moving up / down the list one option at a time ... so your Javascript kicks in again and again, once for each variation between the original parameter and the new desired one. Awful - and if you are actually submitting an html form using onchange JS then this is possibly a complete showstopper for these users.
Regardless, you really should have a separate submit button (for non-Javascript users, search engine crawlers, etc.) anyway; there might be some value in the onchange JS triggering some Ajax, but don't rely on it to be the only way a user can submit a selection.
a source to share
I would suggest that for cross browser compatibility, you are thinking of combining a dropdown with a button to trigger a "go" action. Some browsers, especially when used with accessibility technology, will fire an onchange to select when that element is scrolled. In the presence of the onchange event itself, postbacks in this scenario would be counterproductive. While the user interface may not be very pleasant, button selection degrades more gracefully when the user doesn't have javascript and when the user is using accessibility technology. If you were loading content via AJAX, this would be less important, since the choice would presumably still be where to interact. However, a full redirect to another page may prevent users fromwho are experiencing this problem.
a source to share