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);
}
});
Related
I am able to display a table when a user clicks a search button. But now I want to split the table into chunks of 20 rows where the user can click next or previous to go forward and backward through all of the data. I am not allowed to use JavaScript for this assignment. Only JSP, Java, HTML.
The two debugging out.print() calls are not showing up. A different page is being loaded after one of the buttons is clicked, but the two debugging out.print calls are not displaying any HTML. I have checked out How to know which button is clicked on jsp this post but had no luck.
<form method="GET">
<center>
<input type="submit" name="previous_table" value="Previous" />
<input type="submit" name="next_table" value="Next" />
</center>
</form>
</br>
<%
String val1 = request.getParameter("previous_table");
String val2 = request.getParameter("next_table");
try {
if ("Previous".equals(val1)) { // Get previous results
out.println("<h1>HELLO 1</h1>");
buildTable(rs, out, false);
}
else if ("Next".equals(val2)) { // Get next results
out.println("<h1>HELLO 2</h1>");
buildTable(rs, out, true);
}
} catch(Exception e) {
out.print("<center><h1>"+e.toString()+"</h1></center>");
}
%>
I also have a follow up question. If the user clicks next or previous button, will my current table on the page be overwritten by the new one? That is my intent but I don't know if it will work that way.
I WAS ABLE TO FIX IT BY DOING THIS:
<form method="POST">
<center>
<input type="submit" name="previous_table" value="Previous" />
<input type="submit" name="next_table" value="Next" />
</center>
</form>
</br>
<%
String val1 = request.getParameter("previous_table");
String val2 = request.getParameter("next_table");
you should add name with value for button after that you can get by parameter click value.
`<input type="hidden" name="myprevious" value="previous"/>
<input type="hidden" name="mynext" value="next" />
<%
String val1 = request.getParameter("myprevious");
String val2 = request.getParameter("mynext");
try {
if (val1 == "previous") { // Get previous results
out.println("<h1>HELLO 1</h1>");
buildTable(rs, out, false);
}
else if (val2 == "next") { // Go next results
out.println("<h1>HELLO 2</h1>");
buildTable(rs, out, true);
}
} catch(Exception e) {
out.print("<center><h1>"+e.toString()+"</h1></center>");
}
%>
`
I hope it will help you.
Thanks.
Try to use the subList() method of a List<>().
As explained here.
HOW TO IMPLEMENT IT ##
you can put an hidden input in your form to give you the last index for your list like :
<input type="hiden" value="${last_index_of_your_list + 1}" name="index">
Then in your servlet part you put like this :
int index = Interger.ParseInt(request.getParameter("index"));
if(index <= 0){
datalist = datalist(0, 19>datalist.size()? datalist.size() : 19);
}else{
if(clicked_on_next){
datalist = datalist(index, index+19>datalist.size()? datalist.size() : index+19 );
}else{
datalist = datalist(index - 40, index-20>datalist.size()? datalist.size() : index-20 );
}
}
You are using hidden fields but you need to use submit button for next and previous.
<input type="submit" name="myprevious" value="previous"/>
<input type="submit" name="mynext" value="next" />
Make sure both are define in form. when we submit form after that you will get button value in parameter.same my previous answer. because we can not get parameter value without submit form.
Thanks.
I have a form which has multiple input fields that will be added dynamically when user click the Add button.
I already managed to achieve this, but the problem I am facing now is I cannot pass the parameters that has been added dynamically using JavaScript function, to a servlet.
This is the code of dynamically adding multiple input fields:
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addDynamicDivs").click(function () {
var newTextBoxDiv1 = $(document.createElement('div'))
.attr("id", 'TextBoxDiv1');
newTextBoxDiv1.attr("style",'float: left;');
var newTextBoxDiv2 = $(document.createElement('div'))
.attr("id", 'TextBoxDiv2');
newTextBoxDiv2.attr("style",'float: left;');
var newTextBoxDiv3 = $(document.createElement('div'))
.attr("id", 'TextBoxDiv3');
newTextBoxDiv3.attr("style",'float: left;');
var newTextBoxDiv4 = $(document.createElement('div'))
.attr("id", 'TextBoxDiv4');
newTextBoxDiv4.attr("style",'float: left;');
newTextBoxDiv1.after().html('<label class="inputlabel2">Speaker Name : </label>' +
'<input type="text" name="speakername" id="speakername" value="" >');
newTextBoxDiv2.after().html('<label class="inputlabel2">Speaker Country : </label>' +
'<input type="text" name="speakercountry" id="speakercountry" value="" >');
newTextBoxDiv3.after().html('<label class="inputlabel2">Speaker Company : </label>' +
'<input type="text" name="speakercompany" id="textbox" value="" >');
newTextBoxDiv4.after().html('<label class="inputlabel2">Speaker Desc : </label>' +
'<textarea name="speakerdesc" id="speakerdesc" rows="10" cols="30" ></textarea>');
newTextBoxDiv1.appendTo("#TextBoxesGroup");
newTextBoxDiv2.appendTo("#TextBoxesGroup");
newTextBoxDiv3.appendTo("#TextBoxesGroup");
newTextBoxDiv4.appendTo("#TextBoxesGroup");
});
});
</script>
It appears that the only parameters passed to the servlet are from the form, not including the parameters from the dynamically added input fields.
How can I pass all the parameters from the function to the servlet?
Thanks,
raz
You have to include the dynamic params inside the form. You should put inside the form the div elemt where you are including the dynamic params.
<form>
<div id="TextBoxesGroup">
</div>
</form>
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");
}
});
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" / >
I have a form having fields like:
<div class="row">
<div class="field">
<input class="" type="text" name="college" id="college"/>
</div>
<div class="field">
<input class="" type="text" name="city" id="city"/>
</div>
<div class="field">
<input class="" type="text" name="zip" id="zip"/>
</div>
</div>
<input type="button" class="buttonWidth" id="btnAddressAdd" value="Add Worksite Addressess"/>
I have a Add extra address button that add's another copy of div "row" to the page. I need to send all data from the page as a request to the Controller. How do I write a script that add's extra div copy onclick of the button and also appends a unique id to each of the new fields?
See working example in Dojo: http://jsfiddle.net/phusick/PeQCN/
And the same code in plain vanilla JavaScript: http://jsfiddle.net/phusick/Rceua/
The Dojo version employs dojo/_base/lang::clone as #Peter Rader mentioned:
// var lang = require("dojo/_base/lang");
// var array = require("dojo/_base/array");
// var query = require("dojo/query");
// var domAttr = require("dojo/dom-attr");
var counter = 0;
function duplicate(/*Node*/sourceNode, /*Array*/attributesToBump) {
counter++;
var out = lang.clone(sourceNode);
if (domAttr.has(out, "id")) { out.id = bump(out.id); }
query("*", out).forEach(function(node) {
array.forEach(attributesToBump, function(attribute) {
if (domAttr.has(node, attribute)) {
domAttr.set(node, attribute, bump(domAttr.get(node, attribute)));
}
})
});
function bump(/*String*/str) {
return str + "_" + counter;
}
return out;
}
How to use the aforementioned duplicate function:
// var dom = require("dojo/dom");
// var domConstruct = require("dojo/dom-construct");
var sourceNode = dom.byId("fieldset");
var node = duplicate(sourceNode, ["id", "name", "placeholder"]);
domConstruct.place(node, sourceNode, "after");
I have written code to achieve this.
Logic:
1) get the innerHTML of desired parent
2) replace id in the text
3) Insert the new html
See a working code
Pardon me for bad style of coding on JS part. I am not use to coding directly on DOM. I prefer JQuery.
Try
to use this snipplet (see usage)
http://dojotoolkit.org/reference-guide/1.8/dojo/_base/lang.html#dojo-base-lang-clone