I have a small problem, I just need to redirect to the value of select like:
/results/name/Heli Redel
How would I go about doing that?
<div class="search">
<select th:required="true">
<option th:value="'Eha Raudreha'" th:text="'Eha Raudreha'"></option>
<option th:value="'Heli Redel'" th:text="'Heli Redel'"></option>
<option th:value="'Mait Kuusevaik'" th:text="'Mait Kuusevaik'"></option>
</select>
<a class="buttons" th:href="#{|/results/name/NAME_HERE|}"><button class="deleteBtn">Otsi</button></a><br />
</div>
Add a jQuery function, that when the button is clicked, it redirects to a another url.
jQuery(document).ready(function() {
$('.deleteBtn').on('click', function() {
var selectValue = $('.search').find('select').val()
window.location.replace("/result/name/" + selectValue);
})
})
I would add some ids to your elements to make it easier to fetch data.
Related
I am very new to Java and will like to learn it by applying in my work.
I will like to generate a link based on user input via drop down list.
https://example.com/"input1"/testing_"input2"_xx.html
Input 1 drop down list
Input 2 is date
How do I concatenate input 1 and 2 into the URL?
You have to get the values of the input fields:
function generateURL()
{
var part1 = document.getElementById('part1').value;
var part2 = document.getElementById('part2').value;
var url = "https://example.com/"+part1+"/"+part2+".html";
document.getElementById('result').innerHTML = url;
}
Part 1 of URL:<br/>
<select id="part1">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>
<br/>
Part 2 of URL:<br/>
<select id="part2">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>
<br/>
<button onClick="generateURL();">Generate URL</button>
<br/>
URL Generated:
<span id="result"></span>
In place of the second dropdown select you can use anything from date to input box.
UPDATE
A date example:
function generateURLX()
{
var partx = document.getElementById('partx').value;
var party = document.getElementById('party').value;
var urlx = "https://example.com/"+partx+"/"+party+".html";
document.getElementById('resultx').innerHTML = urlx;
}
Part 1 of URL:<br/>
<select id="partx">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>
<br/>
Part 2 of URL:<br/>
<input type="date" id="party" placeholde="Date">
<br/>
<button onClick="generateURLX();">Generate URL</button>
<br/>
URL Generated:
<span id="resultx"></span>
I have a JSP with a select input in a form, like so:
<form method="post" action="/confirm">
<select id="dropdown" name="dropdown">
<option value="1">1st choice</option>
<option value="2">2nd choice</option>
<option value="3">3rd choice</option>
</select>
<input type="submit" value="submit" name="submit" />
</form>
I have a spring controller that handles this form as follows:
#RequestMapping(value = "/confirm", method = RequestMethod.POST)
public ModelAndView confirm(#RequestParam int dropdown,
HttpServletRequest request,
Model model)
{
ModelAndView modelAndView = new ModelAndView();
modelAndView.addObject("selection", dropdown);
modelAndView.setViewName("confirm");
return modelAndView;
}
On my confirm view, if I want to display the value of the dropdown selection then I can do that like this:
<div id="dropselection">${selection}</div>
If the user selected the first option, "1st choice", for example, then the value that would be passed to the confirm page would be 1.
However, what if I want to pass along the text value from the select tag option? What if a user selected the first option and I needed the value 1st choice to be passed into the controller? How would I retrieve that?
You can't retrieve that value. In form submission it only pass value attribute of select, input tags.
Two options available
You can change value field text to description
If you have hard code that just change that to
<option value="3rd choice">3rd choice</option>
If you have dynamic code, then you can use this kind of approach
List<Answer> answerList = new ArrayList<Answer>();
Answer answer = new Answer();
answer.setAnswerId(3);
answer.setDescription(3rd choice);
ModelAndView modelAndView = new ModelAndView();
modelAndView.addObject("answerList", answerList);
<select id="dropdown" name="dropdown">
<option value="">Select</option>
<c:forEach items="${answerList}" var="answer" varStatus="answerStatus">
<option value="${answer.description}" label="${answer.description}"/>
</c:forEach>
</select>
or keep options as it is and in controller level you can get that value from dropdown request parameter (example: 3)
And after that you can loop the answer list (answerList) and find value in controller level.
<c:forEach items="${answerList}" var="answer" varStatus="answerStatus">
<option value="${answer.answerId}" label="${answer.description}"/>
</c:forEach>
Note
answer.answerId = 3
answer.description = 3rd choice
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 want to display selected value. In the text field I can display it within value like below
value ="<%=event_data.getE_venue()%>"
code :
<input type="text" name="where" placeholder="Add a place" size="23" value ="<%=event_data.getE_venue()%>"/>
<select name="category" value ="<%=event_data.getE_target_category()%>" id="single1">
<option>Sports</option>
<option>Corporate</option>
<option>Religious</option>
<option>Music</option>
</select>
but in dropdown box it doesn't work.
please help me. thanks..
Firstly, select doesn't work in that way , you need to put selected attribute in option that matches your input.
for example:
<option selected='selected'>Sports</option>
check this fiddle :
http://jsfiddle.net/ZLTS7/
your code should be something like :
<input type="text" name="where" placeholder="Add a place" size="23" value ="<%=event_data.getE_venue()%>"/>
<select name="category" id="single1">
<option <%= (event_data.getE_target_category().equals("Sports")?"selected='selected'":"") %>>Sports</option>
<option <%= (event_data.getE_target_category().equals("Corporate")?"selected='selected'":"") %>>Corporate</option>
<option <%= (event_data.getE_target_category().equals("Religious")?"selected='selected'","") %>>Religious</option>
<option <%= (event_data.getE_target_category().equals("Music")?"selected='selected'":"") %>>Music</option>
</select>
You need to change the dropdown value through Javascript or jQuery. You can assign desired value to dropdown just like input
var dd = document.getElementById('single1');
var opts = ddl.options.length;
var value = <%=event_data.getE_venue()%>;
for (var i=0; i<opts; i++){
if (dd.options[i].value == value){
dd.options[i].selected = true;
break;
}
}
or if you are using jQuery.
$("#single1").val(value);
See this example:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slectboxid option').click(function(){
$('#textboxid').val($(this).val());
});
});
</script>
</head>
<body>
<form action="#" method="post">
<select name="select" id="slectboxid">
<option value="test">test</option>
<option value="test2">test2</option>
</select>
<input type="text" name="text" id="textboxid" />
</form>
</body>
</html>
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?