I have this HTML code:
<div class="form-cell">
<label class="label">Company Name<span class="x">*</span></label>
<div class="form-cell-value">
<label class="readonly_label">
<span>ABC PVT LIMITED</span>
</label>
</div>
<div style="clear:both;"></div>
<input type="hidden" id="company" name="company" value="6">
</div>
From the above code I know the id of input field, "company". By using this id I have to get the company name which is "ABC PVT LIMITED".
I tried this but it's not working:
value = $('#company').parent().find('.readonly_label').closest('span').text()
The .closest() function goes up the DOM hierarchy. Try using .find() or .children():
value = $('#company').parent().find('.readonly_label').children('span').text()
Use a different selector with find:
value = $("#company").parent().find(".readonly_label > span").text();
Use children instead of closest.
value = $('#company').parent().find('.readonly_label').children('span').text()
console.log(value)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-cell">
<label class="label">Company Name<span class="x">*</span></label>
<div class="form-cell-value">
<label class="readonly_label"><span>ABC PVT LIMITED</span></label>
</div>
<div style="clear:both;"></div>
<input type="hidden" id="company" name="company" value="6">
</div>
Solution using .siblings() selector
$('#company').siblings('.form-cell-value').find('.readonly_label > span').text();
Related
I have a html container structure like as
<div class='APart'>
<div class='Main'>
<input name='MainInput' value='1'>
</div>
<div class='Sub'>
<input name='SubInput' value='2'>
<input name='SubInput' value='5'>
</div>
</div>
<div class='APart'>
<div class='Main'>
<input name='MainInput' value='3'>
</div>
<div class='Sub'>
<input name='SubInput' value='4'>
<input name='SubInput' value='6'>
</div>
</div>
and I using Jquery to do foreach and get data
$('.APart input[name=MainInput]').each(function(index, element) {
console.log(this.value)
});
now I know how to get MainInput value,next step how to get SubInput value?
this is my expectation result
array[0] = "1,2,5"
array[1] = "3,4,6"
Add a new class tag on your input dom
<div class='APart'>
<div class='Main'>
<input class=''MainClass' name='MainInput' value='1'>
</div>
<div class='Sub'>
<input class=''SubClass' name='SubInput' value='2'>
<input class=''SubClass' name='SubInput' value='5'>
</div>
</div>
<div class='APart'>
<div class='Main'>
<input class=''MainClass' name='MainInput' value='3'>
</div>
<div class='Sub'>
<input class=''SubClass' name='SubInput' value='4'>
<input class=''SubClass' name='SubInput' value='6'>
</div>
</div>
so next step we can selector class like as
$('.APart').each(function(index, element) {
$(this).children('.Main').find('.MainClass').each(function (i,e){
console.log($(e).val())
});
$(this).children('.Sub').find('.SubClass').each(function (i,e){
console.log($(e).val())
});
});
This code to do things
get every APart Class
get APart DOM Data after to find next children class
then we find it after just need use selector to find new class group
I think you meant MainInput? You can select inputs via there name attribute, then get their value using the following:
$('.APart input[name=MainInput]').each(function(index, element) {
console.log($(element).val());
});
Have a look at this CSS Selectors cheat sheet for more.
first give a class name for what your are accessing input
<div class='APart'>
<div class='Main'>
<input name='MainInput' value='1' class="getMain">
</div>
<div class='Sub'>
<input name='SubInput' value='2'>
</div>
<div class='Main'>
<input name='MainInput' value='3' class="getMain">
</div>
<div class='Sub'>
<input name='SubInput' value='4'>
</div>
</div>
after you can access with Jquery
$(':input.getMain').each(function(index, element){
var name = element.name;
});
reference
//this will give all your vaues
U can use the each function for looping
$('.APart input[name="MainInput"]').each(function(){
console.log($(this).val());
});
Consider the following HTML
I am trying to wrap the child elements (label/input) where the label text says 'This one'. Basically, I need to select the full elements without class partial if they contain input text elements and not number uinput elements. One the full elements are selected, their children elements need to be completely wrapped entirely with <div class="wrapped"></div>
<div class="group">
<div class="full">
<label>This one</label>
<input type="text"/>
</div>
<div class="full partial">
<label>Foo</label>
<input type="text"/>
</div>
<div class="full">
<label>Foo</label>
<input type="number"/>
</div>
<div class="full">
<label>This one</label>
<input type="text"/>
</div>
<div class="full">
<label>Foo</label>
</div>
<div class="full partial">
<label>Foo</label>
<input type="text"/>
</div>
<div class="full partial">
<label>Foo</label>
<input type="number"/>
</div>
</div>
Like this:
<div class="wrapped">
<div class="full">
<label>This one</label>
<input type="text"/>
</div>
</div>
You could use a combination of the :not()/:has() selectors to select the desired .full elements. Iterate over the selected elements, and wrap the children elements using a combination of the methods .children()/.wrapAll():
Example Here
$('.group .full:not(.partial):has(input[type="text"])').each(function () {
$(this).children().wrapAll('<div class="wrapped"/>');
});
Alternatively, you could also use the following:
Example Here
$('.group input[type="text"]').closest('.full:not(.partial)').each(function () {
$(this).children().wrapAll('<div class="wrapped"/>');
});
I'm not sure where approach is faster.. probably the first one.
What seems like a simple thing in AngularJS is not working for me and I was hoping you all could be of assistance. Specifically, I am trying to enter the result of an AngularJS expression in another input's "value" attribute. I have set the ng-model's and am calling those correctly, just can't figure out why it won't evaluate. I have tried doing the same expression below the input, and it evaluates, so I believe it's something to do with being in the value attribute which is causing the issue.The code I have currently is:
<div class="row-fluid">
<div class="span4">
<label for="employeeID">Employee ID</label>
<input type="text" class="input-block-level" id="employeeID" for="employeeID" placeholder="ANS1235482" ng-model="createNewUser.EmployeeId">
</div>
<div class="span4">
<label>First Name</label>
<input type="text" class="input-block-level" placeholder="Johnathan" ng-model="createNewUser.FirstName">
</div>
<div class="span4">
<label>Last Name</label>
<input type="text" class="input-block-level" placeholder="Smith" ng-model="createNewUser.LastName">
</div>
</div>
<div class="row-fluid">
<div class="span4">
<label for="username">Username</label>
<input type="text" class="input-block-level" placeholder="JohnathanSmith" value="createNewUser.LastName" >
</div>
<div class="span4">
<label>Password</label>
<input type="password" class="input-block-level" placeholder="***************">
</div>
<div class="span4">
<label>Role</label>
<select class="input-block-level">
<option value="user">User</option>
<option value="admin">Administrator</option>
</select>
</div>
</div>
Ideally, I would like to figure out how to get a username of the first letter of the first name and the full last name to auto-populate using data-binding, but at this point I haven't even been able to get just the standard first name + last name to work.
Any help you could offer would be greatly appreciated.
Thank you!
<input type="text" class="input-block-level" placeholder="JohnathanSmith" ng-value="un" >
Use ng-change directive.
var app = angular.module("app", []);
app.controller("myCtrl", ["$scope", function ($scope){
$scope.fn = "";
$scope.ln = "";
$scope.changed = function () {
$scope.un = $scope.fn[0] + $scope.ln;
};
}]);
DEMO
please use ng-value instead value
here demo: http://jsbin.com/zamih/1/edit
<body ng-app="app">
<div ng-controller="firstCtrl">
<div class="row-fluid">
<div class="span4">
<label for="employeeID">Employee ID</label>
<input type="text" class="input-block-level" id="employeeID" for="employeeID" placeholder="ANS1235482" ng-model="createNewUser.EmployeeId">
</div>
<div class="span4">
<label>First Name</label>
<input type="text" class="input-block-level" placeholder="Johnathan" ng-model="createNewUser.FirstName">
</div>
<div class="span4">
<label>Last Name</label>
<input type="text" class="input-block-level" placeholder="Smith" ng-model="createNewUser.LastName">
</div>
</div>
<div class="row-fluid">
<div class="span4">
<label for="username">Username</label>
<input type="text" class="input-block-level" placeholder="JohnathanSmith" ng-value="createNewUser.LastName" >
</div>
<div class="span4">
<label>Password</label>
<input type="password" class="input-block-level" placeholder="***************">
</div>
<div class="span4">
<label>Role</label>
<select class="input-block-level">
<option value="user">User</option>
<option value="admin">Administrator</option>
</select>
</div>
</div>
</div>
</body>
Change this line:
<div class="span4">
<label for="username">Username</label>
<input type="text" class="input-block-level"
placeholder="JohnathanSmith" value="createNewUser.LastName" >
</div>
To this instead:
<div class="span4">
<label for="username">Username</label>
<input type="text" class="input-block-level"
placeholder="JohnathanSmith" value="{{createNewUser.LastName}}" >
</div>
Your issue is that you are not evaluating createNewUser.LastName as an angular binding, but instead just assigning the text "createNewUser.LastName" to the value attribute. To fix this, put the createNewUser.LastName variable in double curly braces {{...}}.
Hope this helps!
If you have tried any/all of these above mentioned methods and still not able to fix your problem, it could be that your updated files are not loaded to Chrome.
That's what happened to me.
There are two ways to make sure that your js files are up to date on the browser,
1) Hold shift while clicking the reload button of your browser
2) Hard reload your page
* Open Developer Tools by either pressing F12 or ... -> More Tools -> Developer Tools
* Right-click the reload button of your browser and click "Empty Cache and Hard Reload"
The Following is the code I am using in Mootools,
var company_name = $('company_name-wrapper').clone();
company_name.inject($('wmd-button-bar'));
The HTML is as follows,
<div id="company_name-wrapper" class="form-wrapper" style='float:left;'>
<div id="company_name-label" class="form-label">
<label for="company_name" class="required">
Company
</label>
</div>
<div id="company_name-element" class="form-element">
<input type="text" name="company_name[]" id="company_name" value="">
</div>
</div>
..............
..............
<div id='wmd-button-bar'></div>
The Output I am getting after executing the code is,
<div id='wmd-button-bar'>
<div class="form-wrapper">
<div class="form-label">
<label for="company_name" class="required">
Company
</label>
</div>
<div class="form-element">
<input type="text" name="company_name[]" id="company_name" value="">
</div>
</div>
</div>
The Id's or the style of any elements is not getting cloned.
Any help or suggestion is appreciated,
thanks in advance.
Mootools avoids copying ID's to avoid getting double ID's, but you can override that using .clone([contents, keepid]) keepid function paramenters.
So try using: var company_name = $('company_name-wrapper').clone(true, true);
Demo
Notice that doing so you will have duplicate ID's and that is invalid HTML, it will give you problems when you try to refer to different elements with the same ID.
I've managed to get my adding a clone button working but im now having trouble with getting the delete button to work. Wondering if people can see the problem im guessing im totally wrong.
This is the code in jsfiddle
http://jsfiddle.net/AFfa2/
<div class="question">
<div class="questiontext">
20. Details of Children
</div>
<div id="question20">
<div class="questiontitles">
Family Name<br>
Given Names<br>
Sex<br>
Date of Birth<br>
Country of Birth
</div>
<div class="questionanswer">
<input type="text" name="children" class="textbox">
<input type="text" name="children" class="textbox">
<input type="text" name="children" class="textbox">
<input type="text" name="children" class="textbox">
<input type="text" name="children" class="textbox">
</div>
</div>
</div>
<div id="Child" class="question">
<div id="addChild" class="questiontitles">
<input type="button" value="Add Child Info">
</div>
<div id="deleteChild" class="questionanswers">
<input type="button" value="Delete Child Info">
</div>
</div>
$("#addChild").click(function(){
var newElement =$('<div/>').html($("#question20").html());
newElement.addClass('input');
$("#question20").after(newElement);
});
$("#deleteChild").click(function() {
if(childId > 0) childId--;
$("#child"+childId).slideUp();
if ($("#deleteChild").css("display") == "none") $("#deleteChild").slideUp();
});
Try this Answer
$("#addChild").click(function () {
var newElement = $('<div id="childdiv"/>').html($("#question20").html());
newElement.addClass('input');
$("#question20").after(newElement);
childId++;
});
$("#deleteChild").click(function () {
var div = document.getElementById('childdiv');
if (div) {
div.parentNode.removeChild(div);
}
});
$("#addChild").click(function(){
$(".question20:last").after($(".question20:first").clone(true));
});
$("#deleteChild").click(function() {
if($(".question20").length!=1)
$(".question20:last").remove();
});
<div class="question20"> //and the div got class instead of id since cloning the div with same id is not good
http://jsfiddle.net/AFfa2/4/
DEMO
updated code posted by rps
as it deletes all the div elements. Modified it not delete the original form element.
$("#addChild").click(function () {
$(".question20:last").after($(".question20:first").clone(true));
});
$("#deleteChild").click(function () {
if ($('.question20').length > 1) {
$(".question20:last").remove();
}
});
Try this jsfiddle
<div id="question20" class="input">
<div id="question20">20. Details of Children
<br>Family Name
<input type="text" name="children" class="textbox">
<br>Given Names
<input type="text" name="children" class="textbox">
<br>Sex
<input type="text" name="children" class="textbox">
<br>Date of Birth
<input type="text" name="children" class="textbox">
<br>Country of Birth
<input type="text" name="children" class="textbox">
<br>
</div>
<div id="removeChild">
<input type="button" value="Remove Child Info">
</div>
</div>
<div id="addChild" class="input">
<input type="button" value="Add Child Info">
</div>
jQuery code
$("#addChild").click(function(){
var newElement =$('<div/>').html($("#question20").html());
newElement.addClass('input');
$("#question20").after(newElement);
});
$('#removeChild').click(function(){
$(this).parent().remove();
});
This might work
$("#deleteChild").click(function() {
$('#question20').parent().children('.input:last').remove();
});
http://jsfiddle.net/HLpJP/
You've got issues around where your inserting the new rows however. Your inserting new rows after question20, these will appear before existing ones. The remove method will remove the last one so might not be the behaviour you want.
Here is jsfiddle link : http://jsfiddle.net/AFfa2/5/
add remove button
<div id="removeChild">
<input type="button" value="Remove Child Info">
</div>
and jquery
$("#removeChild").click(function(){
$('div.input').get($(this).length).remove();
});
you need to change buttons div classes