Firefox doesn't show form correctly (Chrome and IE show same form without any problem).
In Firefox in first line in form text value doesn't appear.
In Firefox Firebug shows:
<td>
<select id="refSearchType" size="10" name="refSearchType">
<option selected="true" label="Option1" value="Option1"></option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
</select>
In IE View Source shows:
<td>
<select id="refSearchType" name="refSearchType" size="10">
<option value="Option1" label="Option1" selected="selected" />
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
</select>
</td>
My jsp code:
<td>
<form:select path="refSearchType" size = "10">
<option value="${first}" label="${first}" selected="selected"/>
<form:options items="${searchList}" />
</form:select>
</td>
I tried to switch value of selected= to "true" or "yes" , doesn't work
CTRL+F5 doesn't work too
Please advice
Thank you in advance
I fixed the problem by adding ${first} in line of option value
<td>
<form:select path="refSearchType" size = "10">
<option value="${first}" label="${first}" selected="selected">${first}</selected>
<form:options items="${searchList}" />
</form:select>
</td>
This is a bug in Firefox. They don't seem to care, since this has been around since pre-HTML 2.0
https://bugzilla.mozilla.org/show_bug.cgi?id=option-label
Related
I'm using Materialize css framework to develop a custom web app for my company.
So at one point I have to display a select containing a few tasks, grouped by project, using optgroups. Every project is different from one another, and so are the related tasks BUT some tasks may have the same name (even if they are stored with different Ids in the database).
To be as precise as possible, let's say my project "Project One" has a task 'R&D' (id=1) and a task 'Developpement' (id=2). My project "Project Two" has a task "Meeting with customer" (id=3) and a task 'R&D' (id=4).
So the original html select has the right option selected (id=4) but the material select rendered has the first option with the name "R&d" selected...
<select id="selectId" name="SelectName">
<option value="">Select Main task</option>
<optgroup label="Project 1">
<option value="420">Task Name 1</option>
<option value="421">Task Name 2</option>
</optgroup>
<optgroup label="Project 3">
<option value="2168">Task Name 7</option>
<option value="2169" selected="selected">Task Name 2</option>
</optgroup>
</select>
renders
<div class="select-wrapper">
<span class="caret">▼</span>
<input type="text" class="select-dropdown" readonly="true" data-activates="select-options-75d04c8c-c252-a1ab-a84a-b5e81f275405" value="Task Name 2">
<ul id="select-options-75d04c8c-c252-a1ab-a84a-b5e81f275405" class="dropdown-content select-dropdown"
style="width: 250px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;">
<li class=""><span>Select Main task</span></li>
<li class="optgroup"><span>Project 1</span></li>
<li class="optgroup-option "><span>Task Name 1</span></li>
<li class="optgroup-option"><span>Task Name 2</span></li>
<li class="optgroup"><span>Project 3</span></li>
<li class="optgroup-option "><span>Task Name 7</span></li>
<li class="optgroup-option "><span>Task Name 2</span></li>
</ul>
<select id="task_mainTaskQuote" name="task[mainTaskQuote]" required="required" class="initialized">
<option value="">Select Main task</option>
<optgroup label="Project 1">
<option value="420">Task Name 1</option>
<option value="421">Task Name 2</option>
</optgroup>
<optgroup label="Project 2">
<option value="465">Task Name 3</option>
<option value="466">Task Name 4</option>
<option value="467">Task Name 5</option>
<option value="2739">Task Name 6</option>
</optgroup>
<optgroup label="Project 3">
<option value="2168">Task Name 7</option>
<option value="2169" selected="selected">Task Name 2</option>
<option value="2170">Task Name 8</option>
<option value="2180">Task Name 9</option>
<option value="2181">Task Name 10</option>
</optgroup>
</select>
</div>
Here is a jsFiddle about it : https://jsfiddle.net/h7vu2nb1/
Any hints on what I do wrong in this case or on how I can prevent this behaviour?
Thx
This might not be a proper solution but, going through materialize forms.js file on their Github, it appears that the javascript code initializing their select uses the name of the option, not its value. So you are not doing anything wrong, it's just that the way the plugin works doesn't fit your needs.
However regarding your issue I can't provid you more help.
How can i remove the optgroup from a checkbox field
<?= $form->field($model, 'survey_type')->dropDownList([$surveyTypeList],['prompt'=>'Select Survey Type','id'=>'Survey_Type_dropdown']) ?>
provides following html
<label class="control-label" for="Survey_Type_dropdown">Type</label>
<select id="Survey_Type_dropdown" class="form-control" name="Surveys[survey_type]">
<option value="">Select Survey Type</option>
<optgroup label="0">
<option value="2D">2D</option>
<option value="3D">3D</option>
</optgroup>
</select>
<div class="help-block"></div>
You have to send $surveyTypeList as a variable, not a array.
Just remove [].
I have a problem with the validation form, the form have a lot of different fields (input text fields, select option, multiple select option...). I have developed all the logical sourcecode about validation form with spring security, but when the validation form fails (for example, a user don't fill anything) and reload the form again all the input text fields are correctly filled but the select option and multiple select options have been deleted and the user must select it again. Why not get filled as the text fields?
This is a piece of my view:
<tr>
<td><form:label path="TechContactName"><spring:message code="label.techcontactname"/><sup>*</sup></form:label></td>
<td><form:input path="TechContactName" /></td>
<td><form:errors path="techContactName" cssClass="error" /></td>
</tr>
<tr>
<td><form:label path="LicenseProduct"><spring:message code="label.licenseproduct"/><sup>*</sup></form:label></td>
<td><form:select path="licenseProduct" id="selectProduct" size="6" >
<option >Option 1</option>
<option >Option 2</option>
<option >Option 3</option>
<option >Option 4</option>
<option >Option 5</option>
<option >Option 6</option>
</form:select></td>
<td><form:errors path="licenseProduct" cssClass="error" /></td>
</tr>
<tr>
<td><form:label path="DeployCountries"><spring:message code="label.deploycountries"/><sup>*</sup></form:label></td>
<td><form:select path="deployCountries" id="selectCountries" multiple="multiple" >
<option value="AT">Austria</option>
<option value="BE">Belgium</option>
<option value="DK">Denmark</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
</form:select> </td>
<td><form:errors path="deployCountries" cssClass="error" /></td>
</tr>
And my controller:
#SuppressWarnings("finally")
#RequestMapping(value = "/add", method = RequestMethod.POST)
public String addLicense(#Valid #ModelAttribute(value="license") LicenseEntity license, BindingResult result, ModelMap map, HttpServletRequest request)
{
if(result.hasErrors()){
System.out.println("validation errors size..."+result.getErrorCount());
return "editLicenseList";
} else {
//all works correctly
}
}
The form input text field si correctly filled when the validation fails but the form:select and form:select multiple fail and reload the form with any value selected.
Thanks in advance!
Try using Spring's <form:option> tag, rather than the HTML's own <option> tag. This will ensure that the option remains selected after validation failure (because Spring will set the selected attribute).
<form:select path="licenseProduct" id="selectProduct" size="6" >
<form:option value="Option 1"/>
<form:option value="Option 2"/>
<form:option value="Option 3"/>
<form:option value="Option 4"/>
<form:option value="Option 5"/>
<form:option value="Option 6"/>
</form:select>
And
<form:select path="deployCountries" id="selectCountries" multiple="multiple" >
<form:option value="AT" label="Austria"/>
<form:option value="BE" label="Belgium"/>
<form:option value="DK" label="Denmark"/>
<form:option value="FI" label="Finland"/>
<form:option value="FR" label="France"/>
<form:option value="DE" label="Germany"/>
</form:select>
I have designed a website in Adobe Muse. I have an order form that has options to select an item from a drop down list, which has its own price, and then after all items are selected a total is generated.
Heres the code that i have and just need the calculate section of the code and JavaScript if possible:
<form name=myform>
<select name=mytextarea>
<option name=one value=one> </option>
<option name=two value=two> Standard Digital </option>
<option name=three value=three> Matte Laminated </option>
</select>
</form>
<form name=myform>
<select name=mytextarea>
<option name=one value=one> </option>
<option name=two value=two> 5.5mm x 5.5mm </option>
<option name=three value=three> 8.5mm x 5.5mm </option>
<option name=four value=four> 9.0mm x 5.0mm </option>
</select>
</form>
<form name=myform>
<select name=mytextarea>
<option name=one value=one> </option>
<option name=two value=two> 125 </option>
<option name=three value=three> 250 </option>
<option name=four value=four> 500 </option>
</select>
</form>
<form name=myform>
<select name=mytextarea>
<option name=one value=one> </option>
<option name=two value=two> Same Day Collection</option>
<option name=three value=three> Delivery (+ £10)</option>
</select>
</form>
so for each option i need a price to generate and then after all options have been selected, a total should be generated.
Right my thoughts on this are that you would be better to use PHP to do this and then use an
<iframe> </iframe>
Place this is Muse from selecting Object > insert HTML
PHP is very good for this and there are plenty of bits you can find online to get it done.
That's what I would do if it was me.
Cheers
I'm doing a project for a class, basically trying to do a survey to match people with a dorm based on their desired lifestyle. I copied the syntax for the form and some of them pop up correctly-the question appears with a drop down menu, but then the questions "how often do you plan on going to red lion" and "how do you plan on eating most of your meals" dont show up, and the options that should be in the drop down menu appear as text on the page, not as a drop down menu. any ideas? Heres the code:
<!DOCTYPE html>
<html>
<head>
<title> Find the right dorm for you </title>
<h1>Find out what dorm fits your lifestyle!</h1>
</head>
<body>
<p> Please fill out a few quesitons so we can help you figure out which dorm is best for you. </p>
<form method="get" action="slutsky1-results.php">
I enjoy (check all that apply):<br>
<input type="checkbox" name="act1" value="8">Working Out<br>
<input type="checkbox" name="act2" value="3">Bowling<br>
<input type="checkbox" name="act3" value="3">Live Music<br>
<input type="checkbox" name="act4" value="5">Shopping<br>
<input type="checkbox" name="act5" value="7">Food<br>
<input type="checkbox" name="act6" value="9">Bars <br>
<input type="checkbox" name="act7" value="9">Frat Parties <br>
<input type="checkbox" name="act8" value="8">Sports <br>
<input type="checkbox" name="act9" value="3">Library <br>
Is being close to the quad important to you?:
<select name= "Quad">
<option value="1">Not important</option>
<option value="3">Kind of important</option>
<option value="6">Very Important</option>
<option value="3">Only thing that matters</option> <br>
How often do you plan on going to Red Lion?:
<select name= "Lion">
<option value="1">Never</option>
<option value="5">Sometimes</option>
<option value="10">Over 3 times a week</option> <br>
Would you rather go to the ARC or CRCE?:
<select name= "Gym">
<option value="10">Arc</option>
<option value="1">CRCE</option>
<br>
How do you plan on eating most of your meals?:
<select name= "Gym">
<option value="5">Ordering delivery</option>
<option value="8">Walking To Green St.</option>
<option value="5">Making my own food</option>
<br>
Private or Public dorm?:
<select name= "Gym">
<option value="10">Private</option>
<option value="5">Public</option>
<br>
<input type="submit" value="get my results!">
</form>
</body>
</html>
You need to close your select tags (using </select>) after the option lists:
<select name= "Gym">
<option value="10">Arc</option>
<option value="1">CRCE</option>
</select>
Do that to every list.
You aren't closing your select tags. So the browser is trying to guess what you are trying to accomplish. Remember that all tags should be closed.
<select name= "Quad">
<option value="1">Not important</option>
<option value="3">Kind of important</option>
<option value="6">Very Important</option>
<option value="3">Only thing that matters</option>
</select>
For help finding these sorts of issues, run your page against an html validator.