So I have this like in a .jsp file:
<s:select name="dataObject.a" id="a" list="dataObject.aList" value="dataObject.a"/>
And the desired behavior is that the user's preference (stored at dataObject.a) would end up being the initial value of the select element on the page. However, despite the appropriate option in the select element having the attribute 'selected="selected"' it does not display as selected. Any thoughts? All browsers have this issue.
EDIT: Adding the generated HTML
<div class="row">
<span class="class1">
<label id="aLabel" class="labelPadding" for="a">A:</label>
</span>
<select name="dataObject.a" id="a">
<option value=""></option>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
</select>
</div>
Related
I have a form and all data is passing to my Firestore Database as expected with the exception of my dropdown selection and I'm not sure why this is. Any ideas?
<div class="col-lg-6 col-md-12">
<div class="form-group">
<label>Name Of Company:</label>
<select type="text" formControlName="companyName" id="companyName">
<option > Company Name </option>
<option value="Company Name 1">Company Name 1</option>
<option value="Company Name 2">Company Name 2</option>
<option value="Company Name 3">Company Name 3</option>
<option value="Company Name 4">Company Name 4</option>
</select>
</div>
</div>
Found the Issue, Kind of.
So it turns out that the reason this form is not sending the dropdown information to the database is due to some inline css, more specifically a component set to **display: none;**. When I disable this in the Elements -> styles within the console it sends the data as expected.
However, I still haven't found where this element is located in the code or a way to disable it permanently, but it's a start.
Issue Resolved
The display:none issue I mentioned earlier had to do with bootstrap 4 properties when utilizing the nice-select plugin. I simply uninstalled the nice-select plugin and used the native select option with a little css and everything worked perfectly. I tried to find a workaround, but after several hours I decided it was faster to move forward without the plugin.
This part is working if this is not working for you then you need to look at migration table id/name in model or function.
<form action="">
<div class="col-lg-6 col-md-12">
<label>Name Of Company:</label>
<select formControlName="companyName" id="companyName">
<option > Company Name </option>
<option value="Company Name 1">Company Name 1</option>
<option value="Company Name 2">Company Name 2</option>
<option value="Company Name 3">Company Name 3</option>
<option value="Company Name 4">Company Name 4</option>
</select>
</div>
<input type="submit" value="Submit">
</form>
I have on this check in form:
<label>Check in date </label>
<select id="day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="year">
<option value="1">2012</option>
<option value="2">2013</option>
</select>
As you can see, the user will choose the month, the day and the year on different select boxes, however, only one label should exist for all three.
What would be the proper way to do this with HTML ?
Update:
I'm concerned with the accessibility hit that we may have on developing something like the code above. I mean, a blind user should be able to listen each label in order to fill this form...
The problem with using one label for all three input boxes is that an non-sighted user is not going to know which of three boxes the focus is in because the same text will be read out in each case. There's a number of approaches possible. Maybe the safest is to have a label for each box, but hide those labels off to the left side of the viewport. Another possibility which ought to work, but I haven't tested would be this:
<fieldset>
<legend>Check in date</legend>
<select id="day" aria-label="day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="month" aria-label="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="year" aria-label="year">
<option value="1">2012</option>
<option value="2">2013</option>
</select>
</fieldset>
Following with the answer from #Alohci, you can also use aria-labelledby and reverse the naming reference (which I think is a bit closer to the convention you were looking for):
<label id="date">Check in date</label>
<select aria-labelledby="date">
<!-- ... -->
</select>
<select aria-labelledby="date">
<!-- ... -->
</select>
<select aria-labelledby="date">
<!-- ... -->
</select>
Also note, as per the W3C on labelled-by:
If the label text is visible on screen, authors SHOULD use aria-labelledby and SHOULD NOT use aria-label. Use aria-label only if the interface is such that it is not possible to have a visible label on the screen. User agents give precedence to aria-labelledby over aria-label when computing the accessible name property.
You cannot associate a label element with more than one control. This is described in the definition of label.
You could give each select element its own label.
A better approach is to have a single text input field for a date. Then there is no problem with label. It means more work, since you have to parse the data server-side, and you should also parse it client-side (for checks, so that the user can immediately be informed of problems). But it is better usability (surely it is faster to type in a date than to use three clumsy dropdowns) and better accessibility. You need to decide on a date format and clearly tell the user what the expected format is.
There is no proper way; a label refers to one element. Just point it to the first one.
<label for="day">Check in date </label>
You could also use a specifically-styled <fieldset> if you like semantics, but I think that's a bit overkill. An <input type="date"> is probably the best option here, as it is one element that can be pointed to by your <label>, is more semantic, and can be somewhat friendlier if you implement a good date picker to go along with it.
If you want to stick with the <select>s, try giving each one a title attribute for accessibility.
Trying to improve #Bracketworks answer:
<label id="date">Check in date</label>
<label for="day" id="label_day">Day</label>
<select id="day" aria-labelledby="date label_day">
<!-- ... -->
</select>
<label for="month" id="label_month">Month</label>
<select id="month" aria-labelledby="date label_month">
<!-- ... -->
</select>
<label for="year" id="label_year">Year</label>
<select id="year" aria-labelledby="date label_year">
<!-- ... -->
</select>
See example 1 of MDN's "Using the aria-labelledby attribute".
HTML5's input type="date" might be useful too, particularly if you're using month/day/year select boxes as a way to limit date selection possibilities. This input element supports min and max date attributes, so you can apply your limitations. It's not supported by older browsers, but I've seen smart cookies use jQueryUI's datepicker as a shim (by using capabilities detection to determine type="date" support, then loading in and invoking the datepicker only if it isn't supported natively).
I'm writing a really simple form with 2 text fields and one select. For some reason, the select tag with options doesn't display on my page. I can see the 2 text fields and the label for the the select, but not the select it self.
The app is written in rails and I use materialize.
There might be something too obvious that I don't see it, but after 30mn of thinking, I guess it's fair to put it on SO :)
Thanks
Here's the code:
<form action="/resources" method="post">
<input
type="hidden"
name="authenticity_token"
value="<%= form_authenticity_token %>">
<label for="ressource_name">Ressource Name</label>
<input type="text" id="ressource_name" name="resource[ress_name]" value="<%= #resource.ress_name %>">
<label for="ressource_link">Ressource Link</label>
<input type="text" id="ressource_link" name="resource[link]" value="<%= #resource.link %>">
<label for="categories">Categories</label>
<select id="categories" name="resource[category_id]">
<option value="1">Stuff 1</option>
<option value="2">Stuff 2</option>
<option value="3">Stuff 3</option>
<option value="4">Stuff 4</option>
<option value="5">Stuff 5</option>
<option value="6">Stuff 6</option>
<option value="7">Stuff 7</option>
<option value="8">Stuff 8</option>
</select>
<br>
<input type="submit" value="Post">
</form>
So I put the answer (from Samir) here as well as I guess some other people might come across that issue (it won't change your life, but it might save you some minutes that you want to spend on 'real' issues).
Check the styling! For some reason the select tag was defaulted to {display: none;}
The select tags(likely all select tags) on your page are most likely defaulted to styled to 'display : none' and just in case you cannot find the exact css code that is disappearing the select tag, just cascade the old style by declaring a style attribute on the select element and display it to block. like below
<select style="display: block;">
<option value="" selected>Choose Country</option>
</select>
Apologies for this but I've obviously been staring at my monitor too long...
When I run the following code in jsfiddle then only the first label/select and last label/select elements are displayed but not the middle one and I cannot see why
<body>
<form id="form1" runat="server">
<label id="a1" >City</label>
<select id="cityDropDownList" />
<label id="a2" >Property</label>
<select id="propertyDropDownList" />
<label id="a3" >Room Type</label>
<select id="roomTypeDropDownList" />
</form>
</body>
Thank you in advance.
Wrong using SELECT TAG
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Becuse of you didn't close select tag, next tags were displayed improperly.
You asked for why it doesn't select the middle one.
Actually the selector of jquery works as it parsed html by tag.
It works for the first and third as it matches the "first and second" tag as single HTML SELECT TAG AS THERE IS NOT ENDING TAG for first tag. So third SELECT also works ... and fourth tag WILL not work :)
So write like this:
<select id="first_select"></select>
<select id="second_select"></select>
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).