Hi I have problem with my multiple select search form.
The parameters are in the url
urlhomepage.../search?cars=1&cars=2&cars=4
I do not know how to get parameters url in form option as selected
<select multiple="multiple" name="cars[]" id="select2" placeholder="">
#foreach($names as $name)
<option value="{{$name->id}}">{{$name->title}}</option>
#endforeach
</select>
I want to get the effect so that the form options are marked on the basis of a url query
First you should pass variable as array as cars[] like below
urlhomepage.../search?cars[]=1&cars[]=2&cars[]=4
Inside php you can get cars array form query string
<?php
$cars = request('cars',[]);
?>
And put cars value as auto selected in select
<select value="{{$cars}}" multiple="multiple" name="cars[]" id="select2" placeholder="">
Related
I appreciate your passing by my post. I have searched here in StackOverFlow and google as well to fix my following code:
My HTML code:
<form th:action="#{/surgerywaitinglist/saveToWaitinList}"
th:object="${waitinglistDTO}" method="POST">
.
.
.
<select name="departmentName"
th:field="*{department.departmentName}"
th:with="departmentName = ${waitinglistDTO.department.departmentName}"
class="form-control" id="departmentJS">
<option value="" th:selected="selected"
th:disabled="disabled">select option
</option>
<option th:each="department: ${departments}"
th:value="${department.departmentName}"
th:text="${department.departmentName}">
</option>
</select>
.
.
.
<input type="submit" value="Save" class="btn btn-primary" />
</form>
form other posts like this post I found out that th:field and th:selected do not work together; in fact, th:field needs to be replace with something else. Notice that the th:object holds another object (from Department class) ...
My DTO class:
public class WaitinglistDTO {
private Long waitingListId;
#NotBlank(message = "Please enter a procedure")
private String waitingListProcedure;
private String waitingListDiagnosis;
private Long waitingListPatientId;
private Long waitingListSurgeonId;
private Long waitingListDepartmentId;
#DateTimeFormat(iso=ISO.DATE)
private Date waitingListAdditionDate;
#DateTimeFormat(iso=ISO.DATE)
private Date waitingListActualBookingDate;
private Patient patient;
private Surgeon surgeon;
private Department department;
Could you help me figure this out?
Many thanxxxxx :)
...
Update:
The following image explains how it should look,,, however, the default option should be the select option which should be somehow disabled
This is the result I get when I apply the suggested code of Rafael da Silva ,, you can see the pre-selected option is the first option rather than the select option option :)
you can do like this:
<select name="departmentName" th:field="*{department.departmentName}" th:with="departmentName = ${waitinglistDTO.department.departmentName}" class="form-control" id="departmentJS">
<option selected="selected" disabled="disabled">select option</option>
<option th:each="department : ${departments}" th:value="${department.departmentName}" th:text="${department.departmentName}"></option>
</select>
this worked for me.
I don't see why you would add the selected to the blank option, the first option is always selected if your model object has nothing set and if it does normal behaviour would be to have that item selected, which th:field should resolve.
In case you want the select to always start at the default option, even if the model has another value or want to set it some other way. you can set th:id="*{department.departmentName}" and th:name="*{department.departmentName}" and than manualy handle th:selected.
As a side note theres no need to use the th version th:selected="selected" if using static values just selected or selected="selected would sufice in that case
Edit with code, not tested as i don't have my work pc where i am.
If you want to always have the first option selected even when editing with previous data
<select name="departmentName" th:name="*{department.departmentName}" th:id="*{department.departmentName}" class="form-control" id="departmentJS">
<option selected disabled>select option</option>
<option th:each="department : ${departments}" th:value="${department.departmentName}" th:text="${department.departmentName}"></option>
</select>
If you want to fill with existing data but default to the first option
<select name="departmentName" th:field="*{department.departmentName}" class="form-control" id="departmentJS">
<option disabled>select option</option>
<option th:each="department : ${departments}" th:value="${department.departmentName}" th:text="${department.departmentName}"></option>
</select>
I'm not 100% sure on the use of disabled but i think it should work, personally i would just leave it selectable and enforce a #notnull on your bean in controller validation.
the th:with annotation does nothing asfar i can see, what th:with is used for is defining a new variable for all elements nested inside the elment you define it on. example:
<div th:with="newVar='someString'">
<span th:text="${newVar}"></span>
</div>
I need to get a value from the select component of my page and set its value as a parameter in the href.
<td class="body-item mbr-fonts-style display-7"><a th:href="#{/export(exportEntity='Person',semester='javascript:document.getElementById(\'semester\').value')}">Download</a></td>
Semeter variable has the value at my server side:
semester = javascript:document.getElementById('semester').value
and not the dropdown value.
Unfortunately, this code is not picking the value from the select component. Any guess what I have done wrong here.
Thymeleaf runs on the server, while JavaScript runs on the browser. You can't mix it like that.
It's difficult to say what to do, because your question is lacking context, specifically: What is the element with the id semester?
If it's a select element (or another form element), then it would be possible to use neither Thymeleaf nor JavaScript, but a simple form:
<form method="get" action="/export">
<input type="hidden" name="exportEntity" value="Person">
<select name="semester">
<option value="A">Semester A</option>
<option value="B">Semester B</option>
</select>
<input type="submit" value="Download">
</form>
Clicking on the button will have the browser generate an URL such as /export?exportEntity=Person&semester=A and go to it.
I have a filters form in HTML that sends filtering instructions with GET request. After filtering my <select>s don't load values from passed request parameters but <input>s do with their th:value. How can I instruct <select> to get selected value from URL parameters (passed with GET)? I know I can get values from object in model with th:field but that is not what I want to do, the data I want this controls to select is passed in the request.
This is working well for <input>:
<input th:value="${param.minFee}" placeholder="Min. Fee" class="form-control" type="number" min="0" max="100" step="0.01" id="minFee" name="minFee"/>
How can I make this <select> obtain its selected value from request params?
<select class="form-control" name="payingCurrency" id="payingCurrency">
<option th:value="-1">Any</option>
<option th:each="currency : ${currencies}"
th:value="${currency}"
th:text="${currency.name}"></option>
</select>
For this you should use th:selected.
<select class="form-control" name="payingCurrency" id="payingCurrency">
<option th:value="-1">Any</option>
<option th:each="currency : ${currencies}"
th:value="${currency}"
th:text="${currency.name}"
th:selected="${param.currency == currency}" />
</select>
With the important party being th:selected="${param.currency == currency}". (Where param.currency should evaluate to the parameter you are using.)
how to pass many objects in one form? becouse like that not working.... help me please
<form class="form-control" action="#" th:action="#{'/'}" method="post">
<select>
<option th:each="city :${cities}" th:value="${city.getId()}" th:text="${city.getName()}"/>
</select>
<select>
<option th:each="category :${categories}" th:value="${category.getId()}" th:text="${category.getDescirption()}">
</option>
</select>
//this line isnt correct:
<a class="btn btn btn-primary btn-sm" href="#"
th:href="#{'/todo/done?id=' + ${city.id} + '&name=' + ${category.name}}">done</a>
</form>
You add each object as named model attribute. Example
#RequestMapping(value = "message", method = RequestMethod.GET)
public String messages(Model model) {
model.addAttribute("cities", citiesRepository.getAll());
model.addAttribute("categories", citiesRepository.getAll());
return "message/list";
}
Personally I find it more readable to have single object as model attribute. That object has fields for each actual attribute.
See official documentation for more details https://www.thymeleaf.org/doc/articles/springmvcaccessdata.html
In your example you are not using th:each correctly.
You should have th:each as select level (not at option level) then refer to individual items in nested select elements.
like
<select th:each="city :${cities}">
<option th:value="${city.getId()}" th:text="${city.getName()}"/>
</select>
In your last example you are refering to ${city.id} and ${category.name} but city and category are not defined (probably thymleaf error message tells you that).
What exactly you want to achieve? Do you want to link with selected city and category? If so, you need separate model attributes like
selectedCity and selectedCatetory.
I have a partial that I call in layouts/application.html.erb to display a form for a search. The user chooses values from the two select fields; then, should hit enter to render a view with search results.
Here is the partial:
** _search.html.erb:
<form name="classic">
<select name="countries" size="1" onChange="updatecities(this.selectedIndex)" style="width: 150px">
<option selected>Select A Brand</option>
<option value="usa">Opel</option>
<option value="canada">Cheverolet</option>
<option value="uk">Scoda</option>
</select>
<select name="cities" size="1" style="width: 150px">
</select>
</form>
<script type="text/javascript">
var countrieslist=document.classic.countries
var citieslist=document.classic.cities
var cities=new Array()
cities[0]=""
cities[1]=["Vectra|vectravalue", "Corsa|corsavalue"]
cities[2]=["Optra|optravalue", "Lanos|lanosvalue"]
cities[3]=["Octavia|octaviavalue", "Fleshia|fleshiavalue"]
function updatecities(selectedcitygroup){
citieslist.options.length=0
if (selectedcitygroup>0){
for (i=0; i<cities[selectedcitygroup].length; i++)
citieslist.options[citieslist.options.length]=new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1])
}
}
</script>
The javascript is just to filter the second select dropdown based on the first select dropdown. What I need to do is to send the values chosen in this form in the URL for params hash so that I can act on it in the controller and display the search results. I could use link_to.
How do I include the selected values from the form fields in link_to?
Your help is appreciated. Thanks!
Serialize the form and send the data to the server. The selected value is passed as the hashvalue where the key is the "id" for the select tag.