<div id="list1" class="dropdown-check-list"> <span class="anchor">Select State</span>
<ul class="items" data-bind="foreach:carTypes" onchange="GetSelectedValut1()">
<li>
<label>
<input id="items1" type="checkBox" /><span id="vv1" data-bind="text:text,value:text"></span>
</label>
</li>
</ul>
</div>
Want all the values of the cartypes when i check the box. geting only one (top most one) value here.
Here is my javascript code:
function GetSelectedValut1() {
if (document.getElementById('items1').checked) {
var list_value = document.getElementById("vv1").value;
document.getElementById("vall1").innerHTML = list_value;
} else document.getElementById("vall1").innerHTML = "";
}
want all the values of the cartypes when i check the box. geting only one(top most one) value here. my event to get the values is it sufficient here.
Related
Goal: I am trying to iterate through a series of checkboxes, and add an "id" to each elem with the value of the checkboxes sibling text value. i.e. inner text of .k-in
Recent attempt:
function addSelectors() {
const checks = document.querySelectorAll('.k-treeview-lines input[type="checkbox"]');
[].forEach.call(checks, function (checks) {
let knn = document.querySelectorAll('.k-treeview-lines input[type="checkbox"] ~ .k-in');
checks.id = knn.innerText;
});
}
HTML is a series of the below:
<div class="k-mid">
<span class="k-checkbox-wrapper" role="presentation">
<input type="checkbox" tabindex="-1" id="undefined"
class="k-checkbox"><-- id here
<span class="k-checkbox-label checkbox-span"></span>
</span>
<span class="k-in">I want this</span><---- this text
</div>
Do not want to load jQuery...
function addSelectors() {
const checks = document.querySelectorAll(
'.k-treeview-lines input[type="checkbox"]'
);
checks.forEach(function (checkbox) {
const textVal = checkbox.parentElement.nextElementSibling.innerText;
checkbox.setAttribute("id", textVal);
});
}
addSelectors();
<div class="k-treeview-lines">
<div class="k-mid">
<span class="k-checkbox-wrapper" role="presentation">
<input
type="checkbox"
tabindex="-1"
id="undefined"
class="k-checkbox"
/>
<span class="k-checkbox-label checkbox-span"></span>
</span>
<span class="k-in">tempID</span>
</div>
</div>
The item you are requesting is not actually the sibling, they don't share the same parent.
You could do something like this:
function addSelectors() {
const checks = document.querySelectorAll('input[type="checkbox"]');
checks.forEach(c => {
c.id = c.parentNode.nextElementSibling.innerText;
});
}
addSelectors();
<div class="k-mid">
<span class="k-checkbox-wrapper" role="presentation">
<input type="checkbox" tabindex="-1" id="undefined" class="k-checkbox">
<span class="k-checkbox-label checkbox-span"></span>
</span>
<span class="k-in">I want this</span>
</div>
I have a modal with 3 lists that have unique ids:
<p class="accordion" ng-class"{active:accordion==2}" ng-click="accordion = 2">COPY from the PARCEL:</p>
<ul class="related_email_list accordion-content" ng-show="accordion==2">
<li ng-repeat="address in parcelAddressToStk">
<label for="selectAddress_parcel_{{address.AddressID}}">
<input type="checkbox" name="{{address.Alternate}}" class="parcelAddress" id="selectAddress_parcel_{{address.AddressID}}" value="{{address}}" ng-click="selectedAddresses(address);" ng-model="address.isSelected" ng-options="address.AddressID as address.pseudo for address in parcelAddressToStk" />
<span>
<b class="int-name">{{address.AddressType==='Mailing'?'Mailing Address:':(address.AddressType==='Street'?'Parcel Address:':(address.AddressType==='Mailing/Street'?'Mailing/Street Address:':'Home Quarter Address:'))}} </b>
<b>{{address.Alternate}}</b>
<b>{{address.StreetNumber?address.StreetNumber+" ":""}}{{address.StreetDirPre?address.StreetDirPre+" ":""}}{{address.StreetName?address.StreetName+" ":""}}{{address.StreetType?address.StreetType+" ":""}}{{address.StreetDirSuf?address.StreetDirSuf+" ":""}}{{address.UnitNumber!==""?"Unit " + address.UnitNumber:""}}</b>
<b>{{address.Municipality?address.Municipality+" ":""}}{{address.SubDivisionCode?address.SubDivisionCode+" ":""}}{{address.PCODE?address.PCODE+" ":""}}{{address.PostalZip?address.PostalZip+" ":""}}</b>
</span>
</label>
</li>
</ul>
I want to know if it's possible to use the selectAddress_parcel_{ID} in an if statement. I've tried
if ($scope["selectAddress_parcel_" + item.AddressID] == true) {
//do something
}
which comes back as undefined in the watch list. But if I hard-code selectAddress_parcel_56088 in watch I can see the correct object.
Is there an easier way to do this or am I concatenating my if statement incorrectly?
I'm trying to make some textboxes appear everytime a user clicks a button.
i'm doing this with ngFor.
For some reason, the ngFor won't iterate.
I've tried using slice to change the array reference, but still, the text boxes won't appear.
Any idea what i'm doing wrong??
Below are the HTML and component codes.
Thanks!!!
export class semesterComponent {
subjectsNames = [];
addSubject(subjectName: string) {
if (subjectName) {
this.subjectsNames.push(subjectName);
this.subjectsNames.slice();
console.log(subjectName);
console.log(this.subjectsNames);
}
};
<div class="semester-div">
<ul>
<li ngFor="let subject of subjectsNames">
<span>
<input #subjectName type="text" />
<input id = "subjectGrade" type = "number"/>
<input id = "subjectWeight" type = "number"/>
</span>
</li>
</ul>
<br>
<button (click)="addSubject(subjectName.value)">add</button>
<br>
</div>
You are missing the * in *ngFor
<li *ngFor="let subject of subjectsNames">
The way you have your controls written subjectName does not exist because the array is empty and therefore the *ngFor does not render it. Clicking the Add button results in a exception that the value doesn't exist on undefined where undefined is really subjectName.
Moving it outside of the *ngFor will make things work:
<input #subjectName type="text" />
<ul>
<li *ngFor="let subject of subjectsNames">
<span>
{{subject}}
<input id="subjectGrade" type="number"/>
<input id="subjectWeight" type="number"/>
</span>
</li>
</ul>
I suspect you also want to further bind the data as you iterate over the subject names but that's outside the scope of the question.
Here's a plunker: http://plnkr.co/edit/HVS0QkcLw6oaR4dVzt8p?p=preview
First, you are missing * in *ngFor.
Second put out
<input #subjectName type="text" />
from ngFor, should work.
i use input with checkbox type to narrow my search result;
problem is i put the checkboxes in to the modal and when i checked many of them and close the modal the checked inputs become unchecked .
and i want every time that i open the modal input checked been checked.
var filterTemps = [
"partial/uicomponent/mdlFilters/mdl.estateType.filter.html",
];
$scope.showReleventMdl = function(num){
var filtersModal = $modal({
backdrop:true,
placement:'top',
templateUrl : filterTemps[num],
controller : 'filterCtrl',
show: false
});
filtersModal.$promise.then(filtersModal.show);
};
<!-- trigger the function for call modal -->
<ul class="nav navbar-nav">
<li>
</li>
...
</ul>
--------------------------------------------------
<!-- my Modal Template -->
<div class="modal-body">
<ul class="filterList">
<li class="filterListItem half" ng-repeat="item in string.pages.mainPage.estateTypes">
<input id="estateType{{$index}}" ng-click="checked(item)" type="checkbox" class="filterCheck">
<label for="estateType{{$index}}" ng-bind="item"></label>
</li>
</ul>
</div>
i want to know is there any way to store checked inputs and bring them back in checked state with modal ?
TNKS a lot
You are not setting any values to a $scope object. Try this...
<div class="modal-body">
<ul class="filterList">
<li class="filterListItem half" ng-repeat="item in string.pages.mainPage.estateTypes">
<input id="estateType{{$index}}" type="checkbox" ng-model="checkbox[$index].checked" class="filterCheck">
<label for="estateType{{$index}}" ng-bind="item"></label>
</li>
</ul>
</div>
Then, in your controller, you can set up the $scope object for your checkbox values.
$scope.checkbox = {};
I am using the teleriks treeview control (asp.net mvc extensions), where I may have up to three children nodes, like so (drumroll...... awesome diagram below):
it has its own formatting, looking a bit like this:
<%=
Html.Telerik().TreeView()
.Name("TreeView")
.BindTo(Model, mappings =>
{
mappings.For<Node1>(binding => binding
.ItemDataBound((item, Node1) =>
{
item.Text = Node1.Property1;
item.Value = Node1.ID.ToString();
})
.Children(Node1 => Node1.AssocProperty));
mappings.For<Node2>(binding => binding
.ItemDataBound((item, Node2) =>
{
item.Text = Node2.Property1;
item.Value = Node2.ID.ToString();
})
.Children(Node2 => Node2.AssocProperty));
mappings.For<Node3>(binding => binding
.ItemDataBound((item, Node3) =>
{
item.Text = Node3.Property1;
item.Value = Node3.ID.ToString();
}));
})
%>
which causes it to render like this. I find it unsual that when I set the value it is rendered in a hidden input ? But anyway:...
<li class="t-item">
<div class="t-mid">
<span class="t-icon t-plus"></span>
<span class="t-in">Node 1</span>
<input class="t-input" name="itemValue" type="hidden" value="6" /></div>
<ul class="t-group" style="display:none">
<li class="t-item t-last">
<div class="t-top t-bot">
<span class="t-icon t-plus"></span>
<span class="t-in">Node 1.1</span>
<input class="t-input" name="itemValue" type="hidden" value="207" />
</div>
<ul class="t-group" style="display:none">
<li class="t-item">
<div class="t-top">
<span class="t-in">Node 1.1.1</span>
<input class="t-input" name="itemValue" type="hidden" value="1452" />
</div>
</li>
<li class="t-item t-last">
<div class="t-bot">
<span class="t-in">Node 1.1.2</span>
<input class="t-input" name="itemValue" type="hidden" value="1453" />
</div>
</li>
</ul>
</li>
</ul>
What I am doing is updating a div after the user clicks on a certain node. But when the user clicks on a node, I want to send the ID not the Node text property. Which means I have to get it out of the value in these type lines <input class="t-input" name="itemValue" type="hidden" value="1453" />, but it can be nested differently each time, so the existing code I ahve doesn't ALWAYS work:
<script type="text/javascript">
function TreeView_onSelect(e) {
//`this` is the DOM element of the treeview
var treeview = $(this).data('tTreeView');
var nodeElement = e.item;
var id = e.item.children[0].children[2].value;
...
</script>
So based on that, what is a better way to get the appropriate id each time with javascript/jquery?
edit:
Sorry to clarify a few things
1) Yes, I am handling clicks to the lis of the tree & want to find the value of the nested hidden input field. As you can see, from the telerik code, setting item.Value = Node2.ID.ToString(); caused it to render in a hidden input field.
I am responding to clicks anywhere in the tree, therefore I cannot use my existing code, which relied on a set relationship (it would work for first nodes (Node 1) not for anything nested below)
What I want is, whenever there is something like this, representing a node, which is then clicked:
<li class="t-item t-last">
<div class="t-bot">
<span class="t-in">Node 1.1.2</span>
<input class="t-input" name="itemValue" type="hidden" value="1453" />
</div>
</li>
I want the ID value out of the input, in this case 1453.
Hope this now makes a lot more sense.
if possible would love to extend this to also store in a variable how nested the element that is clicked is, i.e. if Node 1.1.2 is clicked return 2, Node 1.1 return 1 and node 1 returns 0
It's a little unclear what you're asking, but based on your snippet of JavaScript, I'm guessing that you're handling clicks to the lis of the tree & want to find the value of the nested hidden field? If so, you want something like this:
function TreeView_onSelect(e) {
var id = $(e.item).find(".t-input:first").val();
}
Edit: In answer to your follow-up question, you should be able to get the tree depth with the following:
var depth = $(e.item).parents(".t-item").length;
In jQuery you can return any form element value using .val();
$(this).val(); // would return value of the 'this' element.
I'm not sure why you are using the same hidden input field name "itemValue", but if you can give a little more clarity about what you are asking I'm sure it's not too difficult.
$('.t-input').live('change',function(){
var ID_in_question=$(this).val();
});