Develop Reference

select option change don't save the value in radio input

I have a list of elements that, selected via a radio input, must output the [value]. The problem is that the select of choice of the value does not find me the secondary value when I go to change the select (always remains the value of prezzoRiepilogo instead of prezzoRiepilogoTwo, when i change). Why? How can I fix it?
<ul class="list-group">
<li class="list-group-item" *ngFor="let interventoStrutturale of interventi">
<td style="float: left;">{{interventoStrutturale.intervento.codice}} {{interventoStrutturale.variante}} - {{interventoStrutturale.intervento.descrizione}}<br>
<select [(ngModel)]="interventoStrutturale.tipo_sup">
<option disabled value="1">Selection one</option>
<option value="2">Selection two</option>
<option value="3">Selection three</option>
</select>
</td>
<td style="float: right;" [ngSwitch]="interventoStrutturale.tipo_sup">
<label class="form-check-inline" *ngSwitchCase="interventoStrutturale.tipo_sup == 2">
<input class="form-check-input" type="radio" name="radio"
[value]="interventoStrutturale.prezzoRiepilogo" (change)="onChangeIntervento($event.target.value)">
</label>
<label class="form-check-inline" *ngSwitchCase="interventoStrutturale.tipo_sup == 3">
<input class="form-check-input" type="radio" name="radio"
[value]="interventoStrutturale.prezzoRiepilogoTwo" (change)="onChangeIntervento($event.target.value)">
</label>
<label class="form-check-inline" *ngSwitchDefault>
<input class="form-check-input" type="radio" name="radio"
[value]="interventoStrutturale.prezzoRiepilogo" (change)="onChangeIntervento($event.target.value)">
</label>
</td>
</li>
</ul>
onChangeIntervento(intervento: number) {
this.prezzoStrutturale = intervento
this.elementoSelezionato = []
this.interventi.forEach(c => {
if(this.prezzoStrutturale == c.prezzoRiepilogo) {
this.elementoSelezionato.push(c)
}
if(this.prezzoStrutturale == c.prezzoRiepilogoTwo) {
this.elementoSelezionato.push(c)
}
})
}

I think you do not apply SwitchCase correctly. Try it this way:
<td style="float: right;" [ngSwitch]="interventoStrutturale.tipo_sup">
<label class="form-check-inline" *ngSwitchCase="2">
<input class="form-check-input" type="radio" name="radio"
[value]="interventoStrutturale.prezzoRiepilogo" (change)="onChangeIntervento($event.target.value)">
</label>
<label class="form-check-inline" *ngSwitchCase="3">
<input class="form-check-input" type="radio" name="radio"
[value]="interventoStrutturale.prezzoRiepilogoTwo" (change)="onChangeIntervento($event.target.value)">
</label>
<label class="form-check-inline" *ngSwitchDefault>
<input class="form-check-input" type="radio" name="radio"
[value]="interventoStrutturale.prezzoRiepilogo" (change)="onChangeIntervento($event.target.value)">
</label>

How to remove or disable patosai tree multiselect

as the title say
I have a problem with removing or disable select option tree multiselect patosai. Actually the disable or remove is working but the display not re-render.
any idea? here jsfiddle
<input id="checkedTree" type="text"/>
<select id="test-select">
<option value="1" data-section="fruit">Banana</option>
<option value="2" data-section="fruit">Apple</option>
<option value="3" data-section="fruit">Avocado</option>
<option value="4" data-section="fruit">Pineapple</option>
<option value="5" data-section="fruit">PenPineappleApplePen</option>
<option value="6" data-section="animal">Tiger</option>
<option value="7" data-section="animal">Lion</option>
<option value="8" data-section="animal">Pitbull</option>
<option value="9" data-section="animal">OrangUtan</option>
<option value="10" data-section="animal">Marsupilami Yellow cartoon</option>
</select>
<button id="dis" onclick = "disableSelect()">
Remove apple and avocado
</button>
$( document ).ready(function() {
var $select = $('#test-select');
$select.treeMultiselect({
enableSelectAll: true,
sortable: false,
searchable: true,
startCollapse: true,
onChange:function(){
if ($select.val() != null){
document.getElementById("checkedTree").value = $select.val();
}else{
document.getElementById("checkedTree").value = "";
}
}
});
});
function disableSelect(){
document.getElementById("test-select").remove(2);
document.getElementById("test-select").remove(2);
//document.getElementById("checkedTree").value = "success";
}
the proof its working, the value that i get when checked those apple and avocado is null...
Btw, is there any way to make 2 select using patosai tree multiselect on same page? How?

That library actually changes the HTML structure of your select box. You have provided this
<select id="test-select">
<option value="1" data-section="fruit">Banana</option>
<option value="2" data-section="fruit">Apple</option>
<option value="3" data-section="fruit">Avocado</option>
<option value="4" data-section="fruit">Pineapple</option>
<option value="5" data-section="fruit">PenPineappleApplePen</option>
<option value="6" data-section="animal">Tiger</option>
<option value="7" data-section="animal">Lion</option>
<option value="8" data-section="animal">Pitbull</option>
<option value="9" data-section="animal">OrangUtan</option>
<option value="10" data-section="animal">Marsupilami Yellow cartoon</option>
</select>
But when using patosai's plugin, it becomes as here below
<div class="section" data-key="0">
<div class="title"><span class="collapse-section">-</span>
<input class="section" type="checkbox">fruit</div>
<div class="item" data-key="0" data-value="1">
<input class="option" type="checkbox" id="treemultiselect-0-0">
<label for="treemultiselect-0-0">Banana</label>
</div>
<div class="item" data-key="3" data-value="4">
<input class="option" type="checkbox" id="treemultiselect-0-3">
<label for="treemultiselect-0-3">Pineapple</label>
</div>
<div class="item" data-key="4" data-value="5">
<input class="option" type="checkbox" id="treemultiselect-0-4">
<label for="treemultiselect-0-4">PenPineappleApplePen</label>
</div>
</div>
<div class="section" data-key="1">
<div class="title"><span class="collapse-section">-</span>
<input class="section" type="checkbox">animal</div>
<div class="item" data-key="5" data-value="6">
<input class="option" type="checkbox" id="treemultiselect-0-5">
<label for="treemultiselect-0-5">Tiger</label>
</div>
<div class="item" data-key="6" data-value="7">
<input class="option" type="checkbox" id="treemultiselect-0-6">
<label for="treemultiselect-0-6">Lion</label>
</div>
<div class="item" data-key="7" data-value="8">
<input class="option" type="checkbox" id="treemultiselect-0-7">
<label for="treemultiselect-0-7">Pitbull</label>
</div>
<div class="item" data-key="8" data-value="9">
<input class="option" type="checkbox" id="treemultiselect-0-8">
<label for="treemultiselect-0-8">OrangUtan</label>
</div>
<div class="item" data-key="9" data-value="10">
<input class="option" type="checkbox" id="treemultiselect-0-9">
<label for="treemultiselect-0-9">Marsupilami Yellow cartoon</label>
</div>
</div>
Which means that you have to select your elements differently. I have inspected the document and what you need is the following;
function disableSelect() {
$('.item[data-value="2"]').remove(); // removes apple
$('.item[data-value="3"]').remove(); // removes avocado
}
To remove those two elements. Here is an updated fiddle to check it yourself: https://jsfiddle.net/htumxL5r/1/

Place values from checkboxes into html input field

I'm trying to take the values of checkboxes and put them into an input field after they are checked. By using JavaScript, I am able to display these values within a <span> tag. However, when I try to do this within an <input> tag, they do not appear.
HTML:
<table width="680" border="0" cellspacing="0" cellpadding="5">
<tbody>
<tr>
<td width="550" nowrap=""><br>
<div class="dropdown_container">
<ul id="select_colors">
<li>
<label>
<input name="categories" type="checkbox" id="categories" value="1" oncheck="cat_id.value=1" />Value 1</label>
</li>
<li>
<label>
<input name="categories" type="checkbox" id="categories" value="2" oncheck="cat_id.value=2" />Value 2</label>
</li>
<li>
<label>
<input name="categories" type="checkbox" id="categories" value="3" oncheck="cat_id.value=3" />Value 3</label>
</li>
<li>
<label>
<input name="categories" type="checkbox" id="categories" value="4" oncheck="cat_id.value=4" />Value 4</label>
</li>
<li>
<label>
<input name="categories" type="checkbox" id="categories" value="5" oncheck="cat_id.value=5" />Value 5</label>
</li>
</ul>
</div>
</td>
</tr>
<!-- Display values from checkboxes within this input tag -->
<tr>
<td> 
<div class="dropdown_box">
<input name="cat_id" type="text" id="cat_id" />
</div>
</td>
<td width="550" nowrap=""> </td>
</tr>
</tbody>
</table>
JavaScript:
$(function () {
$(".dropdown_container input").change(function () {
var checked = $(".dropdown_container input:checked");
var span = $(".dropdown_box input");
span.html(checked.map(function () {
return $(this).val().replace("_"," ");
}).get().join(", "));
});
});

Use .val() instead of .html() as you are setting value property of the element, not updating innerHTML of the element
$(function() {
$(".dropdown_container input").change(function() {
var checked = $(".dropdown_container input:checked");
var span = $(".dropdown_box input");
span.val(checked.map(function() {
return $(this).val();
}).get().join(", "));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table width="680" border="0" cellspacing="0" cellpadding="5">
<tbody>
<tr>
<td width="550" nowrap="">
<br>
<div class="dropdown_container">
<ul id="select_colors">
<li>
<label>
<input name="categories" type="checkbox" id="categories" value="1" />Value 1</label>
</li>
<li>
<label>
<input name="categories" type="checkbox" id="categories" value="2" />Value 2</label>
</li>
<li>
<label>
<input name="categories" type="checkbox" id="categories" value="3" />Value 3</label>
</li>
<li>
<label>
<input name="categories" type="checkbox" id="categories" value="4" />Value 4</label>
</li>
<li>
<label>
<input name="categories" type="checkbox" id="categories" value="5" />Value 5</label>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="dropdown_box">
<input name="cat_id" type="text" id="cat_id" />
</div>
</td>
<td width="550" nowrap=""> </td>
</tr>
</tbody>
</table>

How to show item selected from dropdown should not appear in checkbox list

On my page there is a dropdown list of items (Main Complaint) and a checkbox list on a popup (Additional Complaint) as shown in above image.
The popup checkbox list of Additional Complaint is like below (There are more items in my list so list is in four columns):
HTML code
<label class="question-name" ng-class="{error:hasError()}"> <span class="ng-binding" ng-hide="question.nameHiddenOnMobile">Main Complaint </span> <span class="icon-required" ng-show="question.required"></span> </label>
<select name="Language.PrimarySpoken" ng-hide="showAddAnswer" ng-model="question.response.value" ng-options="a.text as a.getText() for a in question.answers.items" id="Language.PrimarySpoken" ng-value="a.text" class="input-wide " ng-class="{error:hasError()}" ng-change="selectAnswer()">
<option class="hidden" disabled="disabled" value=""></option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
<option value="Five">Five</option>
<option value="Six">Six</option>
<option value="Seven">Seven</option>
<option value="Eight">Eight</option>
</select>
<label class="question-name" ng-class="{error:hasError()}"> <span class="ng-binding" ng-hide="question.nameHiddenOnMobile">Additional Complaint </span> <span class="icon-required" ng-show="question.required"></span> </label>
<div class="form-row added ng-binding content" ng-bind-html="question.getText()" id="text" ></div>
<div class="form-row addlink ng-binding" ng-bind-html="question.getText()"><em><a class='inline' href="#inline_content">+ Add/Edit</a></em></div>
<div style='display:none'>
<div id='inline_content' style='padding:25px; background:#fff; font-size: 17px;'>
<form action="" id="popup_form">
<div class="added">
<div class="column-left">
<label class="checkbox" for="checkbox1" style="font-size:20px;">
<input type="checkbox" name="complaint" value="One" id="checkbox1" data-toggle="checkbox">
One
</label>
<br/>
<label class="checkbox" for="checkbox2" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Two" id="checkbox2" data-toggle="checkbox">
Two
</label>
<br/>
</div>
<div class="column-center">
<label class="checkbox" for="checkbox3" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Three" id="checkbox3" data-toggle="checkbox">
Three
</label>
<br/>
<label class="checkbox" for="checkbox4" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Four" id="checkbox4" data-toggle="checkbox">
Four
</label>
<br/>
</div>
<div class="column-center-right">
<label class="checkbox" for="checkbox5" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Five" id="checkbox5" data-toggle="checkbox">
Five
</label>
<br/>
<label class="checkbox" for="checkbox6" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Six" id="checkbox6" data-toggle="checkbox">
Six
</label>
<br/>
</div>
<div class="column-right">
<label class="checkbox" for="checkbox7" style="font-size:20px;">
<input type="checkbox" name="complaint" value=" Seven" id="checkbox7" data-toggle="checkbox">
Seven
</label>
<br/>
<label class="checkbox" for="checkbox8" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Eight" id="checkbox8" data-toggle="checkbox">
Eight
</label>
<br/>
</div>
</div>
<br/>
<input type="submit" name="submit" id="update" class="button button-orange" style="width: 90px; margin-top: 450px;
margin-left: -533px;" value="Update">
<input type="submit" name="cancel" id="cancel" class="button button-orange" style="width: 90px; background-color:#36606e;" value="Cancel">
</form>
</div>
</div>
JS code
$(document).ready(function(){
$(".inline").colorbox({inline:true,opacity:0.7, fixed:true, innerWidth:1100, innerHeight:550, scrolling:false});
//array to store checkbox values
checkValues = new Array();
document.getElementById('update').onclick = function(){
//capture all text in a variable
var textStr = $('<ul></ul>');
//iterate all checkbox values to create ul
$.each(checkValues, function( index, value ){
textStr.append('<li>'+value+'</li>');
});
//add text
$("#text").html(textStr);
parent.$.colorbox.close();
return false;
};
//add change handler for checkbox
$('input:checkbox[name=complaint]').change(function(){
value = $(this).val();
if(this.checked)
checkValues.push(value);
else
{ //Removing by value
checkValues = $.grep(checkValues, function(n, i) {
return n !== value;
});
}
});
document.getElementById('cancel').onclick = function(){
parent.$.colorbox.close();
return false;
};
});
Question:
If the 'One' item is selected from the dropdown list of Main Complaint, then in the Additional Complaint checkbox list that 'One' item should not appear like below. But the empty space also should not be there.
Can anyone please tell me, how do I get that working using Jquery/JS?
Thanks in advance.

I could not develop a modal window in fiddle but i have written Javascript logic, hope you will find it helpful, working fiddle
JAVASCRIPT
function selectAnswer(sel){
var a= document.querySelectorAll('label');
console.log(this.value);
for(i=0;i<a.length;i++){
a[i].style.display='inline'
}
document.querySelectorAll('.checkbox'+sel.value)[0].style.display='none';
}
while i change your onchange function to this->
onchange="selectAnswer(this)"
Hoping this helps you.

<div style="display:none">
<label class="checkbox" for="checkbox1" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Three" id="checkbox3" data-toggle="checkbox">
One
</label>
</div>
<div >
<label class="checkbox" for="checkbox1" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Four" id="checkbox4" data-toggle="checkbox">
Two
</label>
<br/>
</div>
add div to all labels and apply the css property "display:none" when you click the checkbox hope this will work

clicking on tab moves on to next fieldset

I have a form containing 13 fieldsets , each containing non uniform number of fields. I want to use tab to navigate between the fields and in the end it will move on to the next fieldset.
I have written one javascript in which i have
$('#formElem > fieldset').each(function(){
var $fieldset = $(this);
$fieldset.children(':last').find(':input').keydown(function(e){
if (e.which == 9){
$('#navigation li:nth-child(' + (parseInt(current)+1) + ') a').click();
/* force the blur for validation */
$(this).blur();
e.preventDefault();
}
});
});
In my form when my page loads, when i click on tab button it moves on to the next page without traversing my fields in the current fieldset, but on the next fieldset clicking on tab makes makes my cursor to move to few fields then again without completing my fields it moves on to next fieldset.
I am giving details of my first fieldset in my form
<form id="formElem" name="formElem" action="report_form_submit.jsp" method="post">
<fieldset class="step">
<legend>General Information </legend>
<table>
<tr><td>
<p>
<label for="centers" >Name of the Center</label>
<%
if(user_gr.equals("MA") || user_gr.equals("Ad")){
%>
<select name="centers" id="centers" >
<option value="">Select Center</option>
<!-- Populate Combobox from Database -->
<%
while(rsCenters.next()){
%>
<option value="<%= rsCenters.getInt("id") %>"><%= rsCenters.getString("c_name") %></option>
<%
}
// rsCenters.beforeFirst();
%>
<!-- Populate Combobox from Database -->
</select>
<%
}
else{
//System.out.println("...SQL CENTER :::"+sqlCenter);
while(rsCenters.next()){
center_name=rsCenters.getString("c_code");
%>
<input type="hidden" name="centers" id="centers" value="<%= rsCenters.getInt("id") %>" />
<input type="text" name="" id="" value="<%= rsCenters.getString("c_name") %>" disabled/>
<%
}
}
%>
<!-- <input id="username" name="username" /> -->
<%
}
catch(Exception ex){
System.out.println(ex);
}
%>
</p>
</td>
<td>
<p>
<label for="dt_enrolment">Date of enrolment</label>
<input tabindex="1" id="dt_enrolment" name="dt_enrolment" type="text" onclick="gen_dt()" />
</p>
</td>
<td>
<p>
<label for="srl_no">Serial No</label>
<% if(!rsserial_no.next())
{center_serial_no=center_name+1;}
else
{
String received_serial_no=rsserial_no.getString("serial_no");
center_serial_no=received_serial_no.substring(0, 3);
String center_serial_no1=received_serial_no.substring(3);
//int new_serial_no=0;
int new_serial_no=Integer.parseInt(center_serial_no1);
new_serial_no=new_serial_no+1;
center_serial_no=center_serial_no+new_serial_no;}%>
<input type="hidden" name="srl_no" id="srl_no" value="<%= center_serial_no %>" />
<input id="" name="" type="text" value="<%=center_serial_no%>" disabled />
</p>
</td>
</tr>
<tr>
<td>
<p>
<label for="study_enrolment_no">Study enrolment No</label>
<input tabindex="2" id="study_enrolment_no" name="study_enrolment_no" type="text" />
</p>
</td>
<td>
<p>
<label for="nm">Name</label>
<input tabindex="3" id="nm" name="nm" type="text" />
</p>
</td>
<td>
<p>
<label for="age">Age</label>
<input tabindex="4" id="age" name="age" type="text"/>
</p>
</td>
</tr>
<tr>
<td>
<p>
<label for="gender">Gender</label>
<!-- <input id="gender" name="gender" type="text" /> -->
<select id="gender" name="gender" tabindex="">
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
</p>
</td>
<td>
<p>
<label for="address">Address</label>
<input id="address" name="address" type="text" tabindex=""/>
</p>
</td>
<td>
<p>
<label for="ph_no">Phone No</label>
<input id="ph_no" name="ph_no" type="text" class="nocheck" tabindex=""/>
</p>
</td>
</tr>
<tr>
<td>
<p>
<label for="occupation">Occupation</label>
<input id="occupation" name="occupation" type="text" tabindex=""/>
</p>
</td>
<td>
<p>
<label for="marital_status">Marital status</label>
<select id="maritial_status" name="maritial_status" tabindex="">
<option value="">Select</option>
<option value="Yes">Married</option>
<option value="No">Unmarried</option>
</select>
</p>
</td>
<td>
<p>
<label for="blood_gr">Blood group</label>
<input id="blood_gr" name="blood_gr" type="text" tabindex=""/>
</p>
</td>
</tr>
<tr>
<td>
<p>
<label for="religion">Religion/Cast/Community</label>
<select id="religion" name="religion" class="nocheck" tabindex="">
<option value="">Select</option>
<option value="Hindu">Hindu</option>
<option value="Muslim">Muslim</option>
<option value="Christian">Christian</option>
<option value="Buddhist">Buddhist</option>
<option value="Other">Other</option>
</select>
</p>
</td>
<td>
<p>
<label for="vac_hbsag">Vaccinated for HBsAg</label>
<select id="vac_hbsag" name="vac_hbsag" tabindex="">
<option value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</p>
</td>
<td>
<p>
<label for="monthly_income">Monthly Income</label>
<input id="monthly_income" name="monthly_income" type="text" tabindex=""/>
</p>
</td>
</tr>
<tr>
<td colspan="3">
<p>
<label for="edu_level">Education level</label>
<select id="edu_level" name="edu_level" tabindex="">
<option value="">Select</option>
<%
while(rsLevel.next()){
%>
<option value="<%= rsLevel.getInt("id") %>"><%= rsLevel.getString("edu_name") %></option>
<%
}
%>
</select>
</p>
</td>
</tr>
</table>
</fieldset>
tell me how can i fix this problem. even though i have use tabindex but it is not working properly

Focus the initial element manually
document.getElementById("initFocus").focus();
and use tabindex, it works good. See the fiddle. Also read this - some interesting things about playing with tabindexes.