I have a simple HTML form that I'm using to drive site search for a website I'm creating.
Two of the fields should not be used together, such as "make" and "model" of a car. You wouldn't want someone searching for a "Ford Ram Truck," for instance.
How can I modify my form so that if a certain value in one of the fields is selected, the other field disappears?
Thank you for your help!
<select name="make">
<option value="item 1">item 1</option>
<option value="item 2">item 2</option>
</select>
<select name="model">
<option value="item 1">item 1</option>
<option value="item 2">item 2</option>
</select>
<input name="" type="submit" />
You would need to use javascript and hook up to the change event of the radio buttons.
In your javascript you can set the visibility of any form element to hidden or visible (depending on which you want).
You would still need to validate/check on the server side in order to avoid such a search (since javascript may be off or a malicious user might override your client side validation).
I think Chained Select Menu can solve your problem.
Related
I am working on an assignment for an online web development course I am taking. The assignment is to create an HTML form.
One of the requirements is for there to be 3 dropdown menus - one for month, day, and year. A label of "Birthday:" is to precede these three menus.
The course's assignment solution showed three select elements nested inside of one label element. I tried this and, although it looked normal in the browser, when I uploaded the file to W3C I received the following error:
"Error: The label element may contain at most one button, input, meter, output, progress, select, or textarea descendant."
Is there a proper way to use one label element to be applied to multiple select elements? Or is this a poor practice and instead each day, month, and year should each get its own label?
Here is my code:
<div>
<label>Birthday:
<select name="month" required>
<option value="">Month</option>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
</select>
<select name="day" required>
<option value="">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="year" required>
<option value="">Year</option>
<option value="1918">1918</option>
<option value="1988">1988</option>
<option value="1998">1998</option>
<option value="2008">2008</option>
</select>
</label>
</div>
-
In HTML, <input /> fields are »primitive«, which means, each one represents a single value primitive value like a number, string, boolean, etc. A Birth date, consisting of three values, one for the year, the month and the day is »complex« in that context. So you cannot make HTML »understand« that you are trying to create a »complex« field in that way.
That's why (imho) you should not attach the label (complex) to any of the fields (primitive) and use the label as »decoration« without any connection to any field, than you wont get any validation errors.
<label>'s as wrapping elements can be helpful (especially for radio buttons) to expand the »clicking area/hitbox« and to apply some css, depending on the fields value, without any javascript. Otherwise linking labels to fields is cool for search engines and stuff, but since HTML does not have a standardized definition about: »how to label complex inputs«, it is difficult to say if the proposed approach is helpful, or will be in the future (afik).
So in your case, I would just:
<form>
<div class="complex field-group">
<label>…</label>
<div class="fields">
<!-- eventually to help bots
<label for="x" style="display:none;">…</label>
-->
<input id="x"/>
…
</div>
</div>
</form>
This question already has answers here:
HTML form readonly SELECT tag/input
(46 answers)
Closed 8 years ago.
Please refer this link
Demo
Please help me to make this listbox readonly. Please do not use disable attribute as I need to post it later.
<select size=4 multiple="multiple">
<option selected=selected>Volvo</option>
<option selected=selected>Saab</option>
<option selected=selected>Mercedes</option>
<option selected=selected>Audi</option>
</select>
Why don't you keep this disabled and add a <input type="hidden"> with the information you need to be posted?
Obviously this wasn't very clear so:
<script>
var selectVal = $("#select_user > option[selected]").val();
$("#select_post").val(selectVal);
</script>
<select disabled id="select_user">
<option>Option 1</option>
<option selected>Option 2</option>
<option>Option 3</option>
</select>
<input type="hidden" name="select_post" id="select_post">
Now the user can see the select, but the value is replicated in the hidden input and then sent to the action file. Thankfully, since the select never changes, you don't have to do anything with .change()
There is no readonly attribute available for the element and disabling the field was not an option since we needed the value on the serverside. Some simple javascript did the job:
You can try this script
<select size=4 multiple="multiple" onchange="this.selectedIndex = 1">
<option selected="selected">Volvo</option>
<option selected="selected">Saab</option>
<option selected="selected">Mercedes</option>
<option selected="selected">Audi</option>
</select>
This will only do the job if you meant that the user should be able to see all values in the list and not be able to select a new value.
Demo
As far as I know, readonly doesn't exist for select boxes.
As for best practice, if you don't need the data to be changed, you shouldn't make it a form element. If you only make it a form element in order to get a certain display, use CSS to make it LOOK like a form element.
Plus, if data shouldn't be changed, it's safer not to send it with a form. Javascript can be disabled easily.
CSS
ul.fake_select{
list-style-type:none;
color:#000000;
overflow-y:scroll;
width:100px;
height:auto; /* If you have lots of options, put a fixed value */
padding:0;
}
ul.fake_select li{
margin:0;
background:#3399FF;
color:#FFFFFF;
}
HTML
<ul class="fake_select">
<li>Volvo</li>
<li>Saab</li>
<li>Mercedes</li>
<li>Audo</li>
</ul>
<select size=4 multiple="multiple" onchange="this.selectedIndex=this.defaultIndex;">
<option selected="selected">Volvo</option>
<option selected="selected" >Saab</option>
<option selected="selected" >Mercedes</option>
<option selected="selected" >Audi</option>
</select>
Demo :-
http://jsfiddle.net/2gmKY/2/
I have a web page with search filters to narrow the results. You can click on a result to go to its details page, but if you used the browser's 'back' button to return to the search results, the filters all disappeared. Is it bad practice to wrap the filter options in a "FORM" element so that they'll persist?
before:
<div class="sort-results classes">
<select id="select-classes" name="sort-classes">
<option selected="selected" value="">Sort by</option>
<option value="price-ascending" data-order="asc" data-sort="class-price">Price: Lowest</option>
<option value="price-descending" data-order="desc" data-sort="class-price">Price: Highest</option>
...
</select>
</div>
after:
<div class="sort-results classes">
<form>
<select id="select-classes" name="sort-classes">
<option selected="selected" value="">Sort by</option>
<option value="price-ascending" data-order="asc" data-sort="class-price">Price: Lowest</option>
<option value="price-descending" data-order="desc" data-sort="class-price">Price: Highest</option>
...
</select>
</form>
</div>
The select element is a form element. So in reality you should be wrapping them in a form. Also since your users are submitting data that's yet another reason for it to be in a form.
There is nothing wrong with that (wrapping your form elements in a form).
Does native HTML have a listbox element? You know how it has a drop box element (called select), does it also have a listbox?
If not, do you know how I could place a list box in my Website.
One method, is to create a table & have each element detect the onclick event. But I dont want to make my own just yet. Are javascript widgets easy to use?
Use a select list:
<select multiple="multiple" size="2">
<option value="Whatever">One</option>
<option value="Other">Two</option>
</select>
#Myles has the select box which is correct, you can also allow multiple select options.
<select multiple="multiple">
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
<option value="opt3">Option 3</option>
</select>
Add the multiple attribute to a normal <select> and use the size attribute to determine how many rows you want shown. (If you don't set the size attribute, then all options will be visible.):
<select multiple="multiple" size="5">
See example.
I think what you need is the select tag, but set the selects attributes of multiple and size. Here is a reference http://www.w3schools.com/tags/tag_select.asp.
<select multiple='multiple' size='3'>
<option value='o1'>Red</option>
<option value='o2'>Green</option>
<option value='o3'>Blue</option>
</select>
At this moment the standards do not have a listbox element.
There's a web spec in progress about the <selectmenu> element which does have a listbox slot (not element). Possibly this could end up being back in the <select> element
If you want to read more about it:
https://open-ui.org/prototypes/selectmenu
https://css-tricks.com/the-selectmenu-element/
Is it possible to have a selectbox that has a default option such as: "Select One" but have the term "Select One" not present in the actual list itself?
<select name="test" id="test">
<option value="" selected="selected">Select A Entry</option>
<optgroup label="A Label">
<option value="one">Option 1</option>
<option value="two">Option 2</option>
<option value="three">Option 3</option>
</optgroup>
</select>
I would go so far as to say no. Personally I would leave it in this list but write a javascript function to validate user input on form submission.
You could use this little bit of Javascript to do the trick:
<select name="test" id="test" onclick="this.remove(0);this.onclick=''">
As they click the list to select an option, it removes the first option ("Select an Entry" from the list, then clears the event handler so it only does this the first time.