how to display the selected options below in jsp
<td width="75%" valign="center">
Start Date :
<input id="startDate" name="startDate" id = "startDate" type="text" size="20"><a href="javascript:NewCal('startDate','ddmmyyyy')"><img src="$
Start Time :
<select name="startTime" id = "startTime">
<option value="0">10:00</option>
<option value="1">11:00</option>
<option value="2">12:00</option>
<option value="3">13:00</option>
<option value="4">14:00</option>
<option value="5">15:00</option>
<option value="6">16:00</option>
<option value="7">17:00</option>
<option value="8">18:00</option>
<option value="9">19:00</option>
<option value="10">20:00</option>
<option value="11">21:00</option>
</select>
</td>
i thought request.getParameterValues will be valuable but it shows only something like value="something" only but not the value between both of options tag.
Any ideas? thanks in advance
Best way is using EL (expression language). Request parameters are available as implicit objects in EL. ${param.startTime} equals request.getParameter("startTime").
If you need the option's text instead of the value it's best to create an ArrayList of Strings which you can use to generate the dropdown and to look up the value:
List<String> startTimeList = new ArrayList<String>();
startTimeList.add("10:00");
startTimeList.add("11:00");
request.setAttribute("startTimeList", startTimeList);
You can use JSTL (c:forEach) to generate the list using the index (see the varStatus attribute) as your option's value:
<c:forEach items="${startTimeList}" var="startTime" varStatus="status">
<option value="${status.index}">${startTime}</option>
</c:forEach>
You can then use the value (index) to get an item from your list: ${startTimeList[param.startTime]}.
Related
I'm using a html dropdown in my project. How do I get the select value in the Express server?
<div class="mb-3">
<label for="kk" class="form-label">Designation</label>
<select class="form-select" name="picker" aria-label="Default select example" id="kk">
<option selected>Select</option>
<option value="1">Proffesor</option>
<option value="2">Associate Proffessor</option>
<option value="3">Lab Assistant</option>
</select>
</div>
In my post request handling method I have used this code to get the value:
const f = req.body.picker;
What this gives me is the index of the selected values in the dropdown like 0,1,2 etc instead of actual values like professor, associate professor,lab assistant.
You actually get what is in value attribute of the selected option when you send your request. For the data you want, you can do it this way:
<div class="mb-3">
<label for="kk" class="form-label">Designation</label>
<select class="form-select" name="picker" aria-label="Default select example" id="kk">
<option value="" selected>Select</option>
<option value="Proffesor">Proffesor</option>
<option value="Associate Proffessor">Associate Proffessor</option>
<option value="Lab Assistan">Lab Assistant</option>
</select>
</div>
And that is what you will get :
const f = req.body.picker; // -> "" or "Proffesor" or "Associate Proffessor" or "Lab Assistan"
Here I want to get a project from database to edit or change its properties for ex. destination country.
when the project is loaded the select element should be already selected same as the project.DestinationCountry. Then I may change this property if needed.
<select type="text" class="form-control" id="Destination" value="#project.DestinationCountry">
<option value="Canada">Canada</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
</select>
I tried to use value="#project.DestinationCountry" within select element but it did not work.
Here is c# code
private ProjectModel project;
protected override void OnInitialized()
{
project = _db.GetProject<ProjectModel>(id);
}
This won't work since you can't add a value to the select element.
<select type="text" class="form-control" id="Destination" value="#project.DestinationCountry">
<option value="Canada">Canada</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
</select>
However, to make an option selected by default you need to use the selected attribute on option. To make sure the select element shows the fetched value from database, the best bet would be to use conditionals. If project.DestinationCountry matches the value add the selected attribute.
<select type="text" class="form-control" id="Destination">
<option value="Canada" selected>Canada</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
</select>
You can achieve this using conditional attributes
<select type="text" class="form-control" id="Destination">
<option value="Canada" selected="#(project.DestinationCountry == "Canada")">Canada</option>
<option value="Sweden" selected="#(project.DestinationCountry == "Sweden")">Sweden</option>
<option value="Switzerland" selected="#(project.DestinationCountry == "Switzerland")">Switzerland</option>
</select>
This checks whether the condition matches. If true then the value assigned is same as the attribute name thus resulting in selected="selected". When the value is false the attribute won't render at all. Or better use a for loop to output the options and for each entry you can check whether it's the current value and then add selected attribute to it to it.
I did like this and it worked but I want to know if there is smarter solution for that.
<select type="text" class="form-control" id="Destination">
<option value="">Select a country</option>
#foreach (var country in Countries)
{
if (project.DestinationCountry != null)
{
<option value="#country" selected=#(project.DestinationCountry.ToLower() ==
country.ToString().ToLower())>#country</option>
}
else
{
<option value="#country">#country</option>
}
}
</select>
I have a select HTML element in an Angular ngFor loop:
<select formControlName="type" required>
<option *ngFor="let type of typeList" [ngValue]="type.value">{{ type.caption }}</option>
</select>
In Internet Explorer, the first item in the list is selected when the template loads, but it's value isn't set in the form control, so causes a 'required' validation error until another value is selected in the list. I want to have a 'Please select' option that has a null value to prevent this happening.
This is for Angular 2+ used with or without TypeScript
Add an option like so:
<option [ngValue]="null">Please select</option>
So your control will look like:
<select formControlName="type" required>
<option [ngValue]="null">Please select</option>
<option *ngFor="let type of typeList" [ngValue]="type.value">{{ type.caption }}</option>
</select>
This works as Angular inspects the value attribute because of the square brackets. The value becomes a true null, unlike if we used value="" (this is just an empty string and doesn't match null).
In case you're not using ngForm, another approach to implementing the selected value is to do something like [value]='selectedType' (change)='selectedType = $event.target.value' in your select tag. For example:
In your component.ts:
public selectedType: string;
In your component.html
<select [value]='selectedType' (change)='selectedType = $event.target.value'>
<option value=''>-- Select your Type --</option>
<option *ngFor="let type of typeList" [ngValue]="type.value">{{ type.caption }}</option>
</select>
component.ts
public selectedValue = 'None';
component.html:
<div ">
<label>Highlight</label>
<select [(ngModel)]="selectedTrunk" (change)="onChangeTrunk($event)">
<option value='None'>None</option>
<option *ngFor="let trunklist of DRLNameTrunkList" [selected]="trunk" [value]="trunklist.SIPTRUNKNAME">{{trunklist.SIPTRUNKNAME}}</option>
</select>
</div>
This is my code pelase modify as per your requirements
I am currently working on my first web application. Users need to fill a form, and one of the information is 'city', as a select type input. If the user chooses a city but one of the information is not valid, I would like the chosen city to stay there while the user fixes the invalid input.
For example, I did it for a date that the user needs to enter:
<input type=date name="endDate" value="<c:out value="${requete.endDate}"/>">
And it's working, but for a select type input I don't know how to do it..
<select name="city">
<option value="City" selected>City</option>
<option value="Ottawa">Ottawa</option>
<option value="Toronto">Toronto</option>
<option value="Montreal">Montreal</option>
</select>
The same sort of thing - let's say that the selected city is stored in request.city.
You would need to make sure that the selected option has the "selected" property in your JSP like so:
<select name="city">
<option value="City"
<c:if test="${empty request.city}">selected</c:if>>
City
</option>
<option value="Ottawa"
<c:if test="${request.city == 'Ottawa'}">selected</c:if>>
Ottawa
</option>
<option value="Toronto"
<c:if test="${request.city == 'Toronto'}">selected</c:if>>
Toronto
</option>
<option value="Montreal"
<c:if test="${request.city == 'Montreal'}">selected</c:if>>
Montreal
</option>
</select>
So, to sum up what this is doing - whatever is between a "c:if" element will only be output as HTML if the test evaluates to true. So all this test does is determine whether the selected city equals the value that option represents, and adds the "selected" property to that element if so.
Try with simple EL and selected attribute:
<select name="city">
<option value="City" selected>City</option>
<option value="Ottawa" ${'Ottawa' eq param.city ? 'selected' : ''}>Ottawa</option>
<option value="Toronto" ${'Toronto' eq param.city ? 'selected' : ''}>Toronto</option>
<option value="Montreal" ${'Montreal' eq param.city ? 'selected' : ''}>Montreal</option>
</select>
<form action="getDepartmentID" method="post">
<div id=main>
<select id="depList"name="depList"style="width:190px;"class="selListBox">
<option value="0">[Please Select]</option>
<option value="43">Information Technology</option>
<option value="44">Costing and Budgeting</option>
<option value="45">Supply Chain</option>
<option value="61">Marketing</option>
<option value="62">Financial</option>
<option value="63">HR</option>
</select>
</div>
</form>
on submit , query string contain parameter with value i.e. ?depList=43
When I populate this list using jquery .load(); function i.e.
$('#main').load('ajax/Options.jsp');
Options.jsp
<select id="depList"name="depList"style="width:190px;"class="selListBox">
<option value="0">[Please Select]</option>
<option value="43">Information Technology</option>
<option value="44">Costing and Budgeting</option>
<option value="45">Supply Chain</option>
<option value="61">Marketing</option>
<option value="62">Financial</option>
<option value="63">HR</option>
</select>
it successfully populate but when I press submit after selecting an options, it does not send any parameter, even I use the following
$("#depList").change(function() {
$('#depList option:selected').attr('checked', 'checked');
});
How to resolve this situation?
If you want the form information in the query string upon submit you need to be using GET not POST
<form action="getDepartmentID" method="get">