I have a list of objects services in my thymeleaf context, and I have the following at my page:
<select id="inputService" name="idService" size="1">
<option th:each="service : ${services}" th:text="${service.name}" th:value="${service.idService}"/>
</select>
<p id="selectedServiceLimits"></p>
Each object from services contains fields minAmount and maxAmount. How can I print into my p element the these two fields of the selected service in select by javascript? And how can I print these two fields of the option that is selected when document is ready?
Thanks!
<script th:inline="javascript">
/*<![CDATA[*/
function showLimits() {
var services = /*[[${services}]]*/ null;
var selectedIndex = $("#inputService option:selected").index();
var service = services[selectedIndex];
$("#amountLimits").text("Мин. сумма: " + service.amountMin + ", макс. сумма: " + service.amountMax);
}
$(function() { showLimits(); });
/*]]>*/
</script>
<select id="inputService" name="idService" size="1" onChange="showLimits()">
That's the solution
Related
I wrote the code below. I want to get element by id_proizvoda and get rest info of that input in a textarea inside of that servlet if selected.
My Code:
Statement st = conn.createStatement();
st.executeQuery("SELECT * FROM prodavnica.proizvodi;");
ResultSet rs = st.getResultSet();
out.print("<select id = 'izabrani' name = 'izabrani'>");
while (rs.next()) {
out.print("<option value = '");
out.print(rs.getString("id_proizvoda"));
out.print("'> ");
out.print(rs.getString("ime_proizvoda"));
out.print("</option>");
If I understood you correctly, what you want is show details of select option in a text area.
To do so, you need JS on your page to modify text area content depending on the choice of select option.
I created a fiddle to give you an idea. Here it is
Here is the sample HTML code:
<select>
<option value='' data-matr='tralala'>Select an option...</option>
<option value=1 data-matr='tralala2'>Option 1</option>
<option value=2 data-matr='tralala3' selected=''>Option 2</option>
<option value=3 data-matr='tralala4'>Option 3</option>
<option value=4 data-matr='tralala5'>Option 4</option>
</select>
<textarea id="result"></textarea>
And here is my sample JS code:
$('select').val(3);
$('select').on('change', function(){
var str="";
$( "select option:selected" ).each(function() {
str = $( this ).attr('data-matr') + " ";
});
$('#result').val(str);
});
All you need to do is to modify your java code slightly to add custom attributes into your options and add necessary JS code to your page to facilitate on change events.
Please note that I used JQuery.
I hope it helps.
I use jsoup for parsing html page and submit form. I need to remove "Back" button before submit form. I use element.remove() method, but then I see that form.formData() has not changed. Requested element has removed from form.children() but exists in form.elements(). Is this a bug or I use wrong way to remove element from form?
public class JsoupCheck {
public static void main(String[] args) {
String html = "<html><body><form action=\"demo\">"
+ "<input type=\"submit\" name=\"buttonSave\" value=\"Save\">"
+ "<input type=\"submit\" name=\"buttonBack\" value=\"Back\">"
+ "<select name=\"selection\">"
+ " <option value=\"value1\">Value 1</option>"
+ " <option value=\"value2\" selected>Value 2</option>"
+ " <option value=\"value3\">Value 3</option>"
+ "</select>"
+ "</form></body></html>";
Document doc = Jsoup.parse(html);
FormElement form = (FormElement) doc.select("form").first();
Element e = form.select("form").first();
System.out.println("=== Original content of form");
System.out.println(e);
System.out.println("=== Original content of form.formData()");
for (Connection.KeyVal i : form.formData()) {
System.out.println(i.key() + "=" + i.value());
}
System.out.println("form.elements().size() = " + form.elements().size());
System.out.println("form.children().size() = " + form.children().size());
e.select("input[name=buttonBack]").remove();
System.out.println();
System.out.println("=== Content of form after remove buttonBack (result: buttonBack removed)");
System.out.println(e);
System.out.println("=== Content of form.formData() after remove buttonBack (result: buttonBack exist)");
for (Connection.KeyVal i : form.formData()) {
System.out.println(i.key() + "=" + i.value());
}
System.out.println("form.elements().size() = " + form.elements().size());
System.out.println("form.children().size() = " + form.children().size());
}
}
Output is:
=== Original content of form
<form action="demo">
<input type="submit" name="buttonSave" value="Save">
<input type="submit" name="buttonBack" value="Back">
<select name="selection"> <option value="value1">Value 1</option> <option value="value2" selected>Value 2</option> <option value="value3">Value 3</option></select>
</form>
=== Original content of form.formData()
buttonSave=Save
buttonBack=Back
selection=value2
form.elements().size() = 3
form.children().size() = 3
=== Content of form after remove buttonBack (result: buttonBack removed)
<form action="demo">
<input type="submit" name="buttonSave" value="Save">
<select name="selection"> <option value="value1">Value 1</option> <option value="value2" selected>Value 2</option> <option value="value3">Value 3</option></select>
</form>
=== Content of form.formData() after remove buttonBack (result: buttonBack exist)
buttonSave=Save
buttonBack=Back
selection=value2
form.elements().size() = 3
form.children().size() = 2
FormElement is a special kind of node. Besides maintaining a list of all children (inherited from Node), it holds a second internal list of all elements within the form.
public class FormElement extends Element {
private final Elements elements = new Elements();
...
}
When you call Node#remove on a child, it updates the parent's list of children, not the internal list.
Therefore, to really remove an element, you also need to remove it from this internal list:
e.select("input[name=buttonBack]").remove();
form.elements().removeIf(e -> e.attr("name").equals("buttonBack"));
I have the next select on the view:
<div class="sort">
<label for="sort"><span>Sort by:</span></label>
<select name="sort" id="sort">
<option selected="selected" disabled="disabled" style="display:none;">Choose...</option>
<option
<c:if test="${pagination.sortOn eq 'time' and pagination.asc}">selected="selected"</c:if>
data-text="DESC" value="time"
data-order="asc">
DESC
</option>
<option
<c:if test="${pagination.sortOn eq 'time' and not pagination.asc}">selected="selected"</c:if>
data-text="ASC" />" value="time"
data-order="desc">
ASC
</option>
</select>
</div>
This is how I place JQuery widget on this select:
$('#sort').goodsListSelect({
width : 180,
appendTo : ".sort",
change : function() {
var option = $(this).find(":selected:not([disabled])");
if (option.val()) {
utils.reloadWithParams({
"page" : 1,
"sort" : option.val(),
"order" : option.attr("data-order")
});
}
}
});
The problem is I cant get working the first option "Choose...". It should be displaying only if user not choosen any other option.
I've tried the following answers, but they are not working for me:
HTML select: how to set default text which won't be shown in drop-down list?
How to show disable HTML select option in by default?
How such behavior may be achieved ?
In general, override the selectmenu widget like this
jQuery.widget(
'custom.selectmenu_with_title',
$.ui.selectmenu,
{
_setText: function( element, value ) {
if (element.hasClass('ui-selectmenu-text')) {
element.text('Whatever should be the title');
} else if ( value ) {
element.text( value );
} else {
element.html( " " );
}
}
}
);
and call this one instead the original.
$('#sort').selectmenu_with_title(....);
In your special case, you do not use the orignial selectmenu widget, but a custom version called goodsListSelect. So - insert the custom _setText method into the definition of your custom widget.
I'm trying to make it so that when an option from the combobox is selected it fills out some of the later input fields. current code (below) doesnt give anny errors just simply does not give output on item changed.
my question being how can I make it so that when selected item changes it fills in some fields.
<div>
options:<select id="optionbox" onchange="Change()">
<option value="op1">option1</option>
<option value="op2">option2</option></select><br>
<form action="KlusServlet.do" method="post"> //not relevant i think used for servlets later on
<input id="description" type="text"></input>
</form>
<script type="text/javascript">
function Change() {
var e = document.getElementById("optionbox");
var selOption = e.options[e.selectedIndex].value;
document.getElementById("description").innerHTML = "selected: " + selOption;
}
</script>
</div>
for textboxes you need to use .value not innerHTML like below
document.getElementById("description").value = "selected: " + selOption;
you can use jquery code $('#selector').val(value); for that
Working Code
<div>
options:<select id="optionbox" onchange="Change()">
<option value="op1">option1</option>
<option value="op2">option2</option></select><br>
<form action="KlusServlet.do" method="post"> //not relevant i think used for servlets later on
<input id="description" type="text"></input>
</form>
<script type="text/javascript">
function Change() {
var e = document.getElementById("optionbox");
var selOption = document.getElementById("optionbox").value;
alert(selOption);
$('#description').val(selOption);
}
</script>
</div>
I'm having a dropdown for selecting cities of Tamil Nadu.
All the cities are in an array list and using a for loop, I am iterating the values and writing using document.write but still I'm not getting the values printed in dropdown.
<select>
<script>
document.writeln('<option value="chennai">');
</script>
</select>
How to get the dropdown values printed now?
Thanks in advance!
Assuming you are using jquery :
Assuming your HTML is similar to this
<SELECT NAME="mylist">
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</SELECT>
you need to modify your selector to iterate over the <OPTION> tags, your selector was iterating over the <SELECT> tag
var inputName = mylist;
$(':input[name=' + inputName + '] option').each(function(i, selected) {
alert($(selected).text());
});
if you need in java script :
<form>
<select id="myselect">
<option value="cat">Option 1</option>
<option value="dog">Option 2</option>
<option value="bear">Option 3</option>
</select>
</form>
<script type="text/javascript">
var selectobject=document.getElementById("myselect")
for (var i=0; i<selectobject.length; i++){
alert(selectobject.options[i].text+" "+selectobject.options[i].value)
}
</script>
Your option tag should look like this:
<option value="chennai">Chennai</option>
The code snippet you posted would produce an invalid (unclosed) option tag.
<select>
<script >
var list = [1,2,3];
for(i in list){
document.write("<option>"+list[i]+"</option>");
}
</script>
<select>
var list = ${cities}
I will give you a demo.
<?php
$city=array('Chennai','Madurai','Dindigal');//array containing cities
$count=1;
echo "<select>";
foreach($city as $value)
{
echo "<option value='city.$count'>".$value."</option>";
}
?>
Hope you understands.You can also use the id of each for other purposes in jsp
It's years since I've written anything in JSP and your question is lacking a bit in clarity but I think you're after something like this?
<%
String[] cityArray={"Chennai","Madurai","Dindigal"};
%>
That's just a an array of cities as an example - I assume you have your own
Then, in your page code
<select>
<%
int i=0;
for(i=0;i<cityArray.length;i++)
{
out.print("<option>" + cityArray[i] + "</option>");
}
%>
</select>
I've got nothing to test that with and the memory is a bit dim on jsp but is that what you mean?