I send from Spring to Thymeleaf ArrayList, which consists from two BigDemical parameters. This for price filter and I want to do: from 0 to first element from ArrayList, from first element to second and more second
Spring:
modelAndView.addObject("price",filterPrice);
Html
<div th:each="filterPrice : ${price}">
<input class="priceSelected" type="checkbox" id="price01" value="1"/> 0 -
<span class="filterPriceFirst" th:text="${price[0]}"></span> <br/>
<input class="priceSelected" type="checkbox" id="price02" value="2"/>
<span class="filterPriceFirst" th:text="${price[0]}">
-<span class="filterPriceFirst" th:text="${price[1]}"></span> <br/>
<input class="priceSelected" type="checkbox" id="price02" value="3"/>
> <span class="filterPriceFirst" th:text="${price[1]}">
<br/>
</div>
Code working, but I recive all value twice. But I need to recive all value only one time. Where my misstake?
In HTML You are using th:each that loops through the array. Since your array has two elements it does it twice. Removing th:each will fix it. Also element ID should be unique so you should use price03 on the last input.
Your code should look something like this
<div>
<input class="priceSelected" type="checkbox" id="price01" value="1"/> 0 -
<span class="filterPriceFirst" th:text="${price[0]}"></span>
<br/>
<input class="priceSelected" type="checkbox" id="price02" value="2"/>
<span class="filterPriceFirst" th:text="${price[0]}">-
<span class="filterPriceFirst" th:text="${price[1]}"></span>
<br/>
<input class="priceSelected" type="checkbox" id="price03" value="3"/> >
<span class="filterPriceFirst" th:text="${price[1]}">
<br/>
</div>
Related
I have just added search box to an index view
<form asp-action="Index" asp-route-account="#Model.First().AccountId" method="get">
<div class="form-actions ">
<p>
<input id="searchStringId" type="text" name="searchString" value="#ViewData["currentFilter"]" />
<input type="submit" value="Search" class="btn btn-primary">
<a asp-action="Index" asp-route-account="#Model.First().AccountId">Back to Full List</a>
</p>
</div>
</form>
This gives me:
https://localhost:44377/MainUsers/Funds?searchString=aldi
But I need
https://localhost:44377/MainUsers/Funds?account=1&&searchString=aldi In other words I need the search string to also include the route id.
Any ideas?
I need the search string to also include the route id. Any ideas?
You can try to achieve the requirement by using a hidden input field as below.
<input name="account" type="hidden" value="#Model.First().AccountId" />
<input id="searchStringId" type="text" name="searchString" value="#ViewData["currentFilter"]" />
Test Result
How to submit form with dynamical added texbox in div MVC.
Hi,
I want to submit a form which a textbox (full name),age ,(Phone no,phonenotype)
User can add n no. of phone no,phonetype eg.
Name -michale
age- 27
Phone:989878767 phonetype - mobile
Phone 022787656 phonetype- office
I want to submit this form to save the data in the database.
But in formcollection phone,phonetype is coming as separate array .
Hence unable to find which phone no. is mobile or office.
A dirty way:
use a name concatenated with a number:
<body> <div id="listPhones">
<div>
<input type="text" name="phone00"/><input type="text" name="phonetype00"/>
</div>
</div>
<bouton onclick="addPhone()">More</bouton>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.3.min.js"> </script>
<script type="text/javascript">
function addPhone() {
var nbr_phone = $("#listPhones").children().length;
$("#listPhones").append("<div><input type='text' name='phone" + nbr_phone + "'/><input type='text' name='phonetype"+ nbr_phone + "'/></div>"); } </script>
</body>
How are you constructing the payload you're submitting?
You can POST JSON - e.g.
{"name":"foo", "age":"123", "phone":[{"type":"mobile", "no":"12345"}, {"type":"home", "no":"345678"}]}
If you're building <input />s, then something like this:
<ul>
<li>Name: <input type="text" name="name" /></li>
<li>Age: <input type="text" name="age" /></li>
<li>Phone type:
<input type="radio" name="phone[0][type]" value="mobile" /> Mobile
<input type="radio" name="phone[0][type]" value="home" /> Home
</li>
<li>Phone: <input type="text" name="phone[0][no]" /></li>
<li>Phone type:
<input type="radio" name="phone[1][type]" value="mobile" /> Mobile
<input type="radio" name="phone[1][type]" value="home" /> Home
</li>
<li>Phone: <input type="text" name="phone[1][no]" /></li>
</ul>
<input type="submit" value="go" />
Hth.
I have a color filter, simillar to this:
<input type="checkbox" id="orange" class="orange" value="orange"/>orange
<br/>
<input type="checkbox" id="peach" value="peach"/>peach
<br/>
<input type="checkbox" id="terracotta" value="terracotta"/>terracotta
<br/>
<input type="checkbox" id="coffee" value="coffee"/>coffee
<br/>
<input type="checkbox" id="browne" value="browne"/>browne
<br/>
<input type="checkbox" id="rose" value="rose"/>rose
<br/>
<input type="checkbox" id="red" value="red"/>red
<br/>
I recive color from DB.
<div th:each="model : ${allColor}">
<span th:text="${model.color}"/>
Can I hide color, with use Thymeleaf, which is not in DB?
For example now I haven't Rose, Coffee and Peach colors, but maybe in future I will have this color. I want to do colors verification , if color is in DB, user can see on UI checkbox, else checkbox hide. I read about th:if and th:unless. Whether it is possible to make it with use Thymeleaf?
If I try to do:
<input type="checkbox" th:if="${model.color==coffee}"id="coffee" value="coffee"/>coffee
It's not working.
Instead of hiding colors, you should create the color checkboxes with a loop as well. Like this:
<th:block th:each="model : ${allColor}" th:with="color=${model.color}">
<input type="checkbox" th:id="${color}" th:class="${color}" th:value="${color}"/> <span th:text="${color}" />
<br />
</th:block>
As for why your original attempt didn't work, it's hard to tell without seeing more of the html. I'm guessing that ${model.color} was undefined, because you weren't in a loop? Also, you were missing quotes around 'coffee'. like this: `${model.color == 'coffee'
Something like this may work as well, but I would recommend the loop.
<input th:if="${allColor.contains('orange')}" type="checkbox" id="orange" class="orange" value="orange"/>orange<br/>
<input th:if="${allColor.contains('peach')}" type="checkbox" id="peach" value="peach"/>peach<br/>
<input th:if="${allColor.contains('terracotta')}" type="checkbox" id="terracotta" value="terracotta"/>terracotta<br/>
<input th:if="${allColor.contains('coffee')}" type="checkbox" id="coffee" value="coffee"/>coffee<br/>
<input th:if="${allColor.contains('browne')}" type="checkbox" id="browne" value="browne"/>browne<br/>
<input th:if="${allColor.contains('rose')}" type="checkbox" id="rose" value="rose"/>rose<br/>
<input th:if="${allColor.contains('red')}" type="checkbox" id="red" value="red"/>red<br/>}`.
I tried to use this form to put checkboxes on a form:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
My problem is that when I try to get the checkboxes checked with my parameters, I always can get only one (the last one checked, example: if I check 1 and 2, I will get 2 only).
How can I do to get them in my controller?
Thanks in advance
Try giving your inputs a name attribute with unique value attributes and unique id attributes.
Example:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" id="first" value="1" name="box-selections[]" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" id="second" value="2" name="box-selections[]"> Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" id="third" value="3" name="box-selections[]"> Checkbox 3
</label>
</div>
With succes I've created a page that uses the set of radio buttons that are formatted jquery. But as soon as I add the div's need to position the content on the page, the radio buttons are still formatted, but do not act as radio buttons anymore (they act like checkboxes). This is my code, what's wrong with it?
<script>
$(document).ready(function() {
$("#dt_hel").buttonset();
});
</script>
<!-- end script radiobuttons -->
<div class="demo">
<div id="ContentContainerLeft" >
<form id="dt_this_form" name="dt_this_form" action="this.php" method="post">
<p>
</div>
<div id="ContentContainerMiddle" >
<P>
<div id="dt_hel" style="font-size:80%;">
<input type="radio" id="radio1" name="dt_hel" value="0" /><label for="radio1">Lower</label>
<input type="radio" id="radio2" name="dt_hel" value="1" /><label for="radio2">Equal</label>
<input type="radio" id="radio3" name="dt_hel" value="2" checked/><label for="radio3">Higher</label>
</div>
<P></P>
</div>
<div id="TweetContainer" >
<P>
</div> <!-- end tweetcontainer -->
</div><!-- End demo -->
</form>
If you follow the rule of closing the most recent tag before closing older tag (ie set the form opening tag above the tag) then it should work e.g.
<form id="dt_this_form" name="dt_this_form" action="this.php" method="post">
<div class="demo">
<div id="ContentContainerLeft" >
<p>
</div>
<div id="ContentContainerMiddle" >
<P>
<div id="dt_hel" style="font-size:80%;">
<input type="radio" id="radio1" name="dt_hel" value="0" /><label for="radio1">Lower</label>
<input type="radio" id="radio2" name="dt_hel" value="1" /><label for="radio2">Equal</label>
<input type="radio" id="radio3" name="dt_hel" value="2" checked/><label for="radio3">Higher</label>
</div>
<P></P>
</div>
<div id="TweetContainer" >
<P>
</div> <!-- end tweetcontainer -->
</div><!-- End demo -->
</form>