In jsp, is there any attribute to provide the information that values in the dropdown got changed?
Say Example:
I have dropdown country - On page load it have "US" in the dropdown and I'm changing to "UK" and then again changing to "US". In this case I have not done any change so I have nothing to save but if I click save button my page is getting submitted. Is there anyway to avoid this page submission.?
Yes, it is. But you have to use javascript, not jsp. Example code
html:
<form class="checked">
<input type="hidden" id="countrySelectInitial" value="UK" /> <!-- we need this element to store initial value -->
<select name="country" class="checkedInput" id="countrySelect">
<option value="US">US</option>
<option value="UK" selected>UK</option>
</select>
<input type="submit" class="submitButton" disabled />
</form>
js:
$(".checkedInput").change(function() {
var newValue = $(this).val();
var idValue = $(this).attr('id'); // we need id to retrieve initial value. Initial value is stored in element with id <id>Initial
var oldValue = $("#" + idValue + "Initial").val();
if(newValue === oldValue) {
// if value don't changed - disable button. user have no possibility to submit form
$(this).parents("form.checked").find(".submitButton").attr("disabled", true);
} else {
// if value changed - remove "disabled" attribute. User can click button and submit form
$(this).parents("form".checked).find(".submitButton").removeAttr("disabled");
}
});
Related
I have a JSP page in my web application and i want to refresh the page with the parameter of option.
<select class="form-control combobox" name="education" >
<option value="" disabled selected hidden>Choose an education</option>
<option>English</option>
<option>French</option>
<option>Dutch</option>
<option>Spanish</option>
</select>
I want to use this parameter for querying my database again. Forexample;
<%
BookDAO bdao = new BookDAO();
for (TblBooks book : bdao.getAllBooks()) {%>
<tr>
<td><%=book.getTittle()%></td>
<td><%=boek.getAuthor()%></td>
<td><%=boek.getCategory()%></td>
<td><%=boek.getEducation()%></td>
<td><input type='checkbox' name ='chk1' /></td>
</tr>
<% }%>
I can get the parameter with request.getParameter("education") but how can i refresh page and query again with this parameter?
In Javascript, You can ask a web page to reload itself (the exact same URL) by:
location.href = location.href;
You can ask a web page to load a different location using the same mechanism:
location.href = 'http://www.google.com'; // or whatever destination url you want
You can get the value of a select control (which needs to have an id attribute):
var ctrl = document.getElementById("idOfSelectControl");
var selectedOption = ctrl.options[ctrl.selectedIndex].value;
So, if you update your JSP to give the control an id:
<select class="form-control combobox" id="education" name="education" >
you should be able to reload the page:
var educationControl = document.getElementById("education");
var selectedOption = educationControl.options[educationControl.selectedIndex].value;
location.href = "http://mysite.example/mypage?education=" + selectedOption;
By the help of Jason i have solved it. I added an onchange event to my select tag
onchange="changeThePage()"
Then i defined a javascript function.
function changeThePage() {
var selectedOption = "book.jsp?education=" + $("#education option:selected").text();
location.href = selectedOption;
}
Then i got the parameter by
String education = request.getParameter("education");
Then i added String education as parameter to my bdao.getAllBooks(education)) method for to query.
'
<script>
function abc(){
var yourSelect = document.getElementById( "ddlViewBy" );
var val = yourSelect.options[ yourSelect.selectedIndex ].value;
//window.location.href=window.location.href;
alert(val);
window.location.replace("index.jsp?name="+val);
}
</script>
<select id="ddlViewBy" onchange="abc()">
<option>select</option>
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
</select>
<%
String name=request.getParameter("name");
if(name!=null){
%>
<table>
<tr>
<td>author<%=name%></td>
<td>book name<%=name%></td>
</tr>
</table>
<%
}
%>
Hi,
try this, this will be helpful,
when you select a value it will call abc, function and then you are assigning that value in scriptlet..and also page is refreshing. in scriptlet you can access that value using request.getParameter("name").
now you can write your code inside scriptlet..hope helpful for someone.. :)
thanks...
I have a form that includes a radio button, and I'm trying to turn the radio button into a "bootstrap switch" (http://www.bootstrap-switch.org/). This is how I'm currently doing it:
<input type="radio" name="myRadio" value="true">
<script>
$ ('[name="myRadio"]').bootstrapSwitch();
</script>
My radio button gets replaced with a bootstraps switch, but it's value is set to null regardless of wether the switch is turned on or off. If I remove the script and use a plain radio button, everything works as it's supposed to.
I want to retrieve the radio button value in a servlet like this:
String value = request.getParameter("myRadio");
What is wrong, and how can I fix it?
Attach switchChange event to bootstarp switch and then get it's state like
$("[name='my-checkbox']").bootstrapSwitch();
$('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
console.log(this); // DOM element
console.log(event); // jQuery event
console.log(state); // true | false
});
This is for those who have paired radio buttons with Enable/Disable kind of values
Original HTML:
<INPUT TYPE="RADIO" NAME="radio_active" VALUE="Yes" onClick="trunOff(0)" checked>Activated
<INPUT TYPE="RADIO" NAME="radio_active" VALUE="No" onClick="turnOff(1)">Deactivated
Replace above with HTML:
<input type="hidden" name="radio_active" data-on="Yes" data-off="No" value="Yes" data-onchange="trunOff">
<input type="checkbox" class="bs-switch-radio" data-hidden="radio_active" data-size="small" data-label-width="auto" data-on-text=" Activated " data-off-text=" Deactivated " checked />
jQuery:
jQuery('.bs-switch-radio').bootstrapSwitch();
jQuery('.bs-switch-radio').on('switchChange.bootstrapSwitch', function(e,state){
var hidden = jQuery(this).attr('data-hidden');
var jhidden = jQuery("input[name='"+hidden+"']");
var on = (jhidden.attr('data-on'))? jhidden.attr('data-on'): 1;
var off = (jhidden.attr('data-off'))? jhidden.attr('data-off'): 0;
var state_val = (state)? on : off;
jhidden.val(state_val);
var fnOnchange = jhidden.attr('data-onchange');
var fn = window[fnOnchange];
if(typeof fn === 'function') {
fn(state);
}
});
In my Java class I've declared an attribute like this,
String option = "<select name='logopt'><option value='fulllog'>Complete Log</option><option value='InfoLog'>INFO Log</option><option value='ErrorLog'>Error Log</option></select><br><br>";
request.setAttribute("LogOption", option);
in my jsp I've accessed the same like this,
<div id="box">${LogOption}</div>
Now as this is a select box, I want to get the select box value in Javascript How do I do this?
Like this -
JavaScript --> var selectVal = document.getElementsByName('logopt')[0].value;
jQuery --> var selectVal = $('select[name=logopt]').val();
Demo ----> http://jsfiddle.net/8t6mP/
Based on this answer
In my Java class I've changed what I had to,
String option = "<select name='logopt'onchange='xyz(this)'><option value='fulllog'>Complete Log</option><option value='InfoLog'>INFO Log</option><option value='ErrorLog'>Error Log</option></select><br><br>";
request.setAttribute("LogOption", option);
in my jsp page, I've added
function xyz(sel)
{
var val = sel.value;
alert(val);
}
and now this gives me the value of select
you can use attribute selector as specified of jquery as specified by Adil
<div>
<select name='logopt'>
<option value='fulllog'>Complete Log</option>
<option value='InfoLog'>INFO Log</option>
<option value='ErrorLog'>Error Log</option>
</select>
</div>
<input type="button" onClick ="return test();"/>
and js method
function test()
{
var x = $('select[name=logopt]').val();
alert(x);
}
jsfiddle link
jsfiddle
I try to keep the value of dropbox after reload page code is
<select name="slLimit" class="slLimitCl" id="limited_num" onchange="selectedTheChoice()">
<option value="10">10</option>
<option value="25">25</option>
<option value="100">100</option>
<option value="0">All</option>
</select>
<input type="hidden" id="selectedValue" name="selectedValue" value="<s:property value="limited_num"/>" />
<script type="text/javascript">
$(document).ready(function(){
var selectedValue = $("#selectedValue").val();
console.log(selectedValue);
$("#limited_num").val(selectedValue);
});
function selectedTheChoice(){
var code = $("#hidden_bunrui_code").val();
loadAjaxData(code);
}
when the selectedTheChoice() return no data the
console.log(selectedValue);
show right value of dropbox and can keep the selected value
but when
selectedTheChoice()
return data. the
console.log(selectedValue);
show undefined and i can not keep the value of dropbox. It return to the first value
Thanks for any help
Try to store that selected value in session.Then you can access after refresh the page.Otherwise you can not access client side data after refresh the page
I have this iterator that loops through an object.
<s:iterator value = "choices" status = "key">
<s:set var = "test" value ="%{#key.index}"/>
<input type = "radio" name="choices[{key.index}].answer" />
<s:textfield name = "choices[%{#key.index}].value" value = "%{choices[%{#key.index}].value}"/>
<br>
</s:iterator>
where answer is a boolean value, that I am trying to set through radio buttons.
but the problem is, upon on the generated html, teh radio buttons. is like this
<input type = "radio" name="choices[%{#key.index}].answer" />
It did not have the indice/index. it only gave me the %{#key.index}
you have to use property tag to get the actual value
<input type = "radio" name="<s:property value='%{choices[#key.index].answer}' />" />
Better use radio tag of struts tag library, like this
<s:radio name="choices[%{#key.index}].answer" / >