how to get child of div element - javascript

<div class="div" id="div">
<div class="row">
<div class="col1">
<input type="text">
<!--I need to get a value of these inputs-->
</div>
<div class="col2">
<input type="text">
<!--I need to get a value of these inputs-->
</div>
</div>
<div class="row">
<div class="col1">
<input type="text">
<!--I need to get a value of these inputs-->
</div>
<div class="col2">
<input type="text">
<!--I need to get a value of these inputs-->
</div>
</div>
</div>
How to get values of all of inputs in div and how to check in which div input in(col1 or col2);
in my case div with class "row" will be added via firebase database.
const inputs = document.querySelectorAll(".div > .col");
alert(inputs.value);


Using JavaScript, try looping with forEach
var inputElem = document.querySelectorAll(".row input");
inputElem.forEach(function(obj){
console.log(obj.value)
})
Snippet:
var inputElem = document.querySelectorAll(".row input");
inputElem.forEach(function(obj){
console.log(obj.value)
})
<div class="div" id="div">
<div class="row">
<div class="col1">
<input type="text" value="one">
<!--I need to get a value of these inputs-->
</div>
<div class="col2">
<input type="text" value="two">
<!--I need to get a value of these inputs-->
</div>
</div>
<div class="row">
<div class="col1">
<input type="text" value="three">
<!--I need to get a value of these inputs-->
</div>
<div class="col2">
<input type="text" value="four">
<!--I need to get a value of these inputs-->
</div>
</div>
</div>


I think this could work:
$("div input").each(function(){
// Get the value:
console.log($(this).val());
// check in which div input in(col1 or col2)
console.log($(this).closest("div").attr("class"));
});


Try this:
const inputs = document.getElementById('div').getElementsByTagName('input');
console.log(inputs[0].value, inputs[1].value);
See an example here: https://jsfiddle.net/xbdd6q13/

Related

Create an array of objects from HTML don't works right

I've this structure here build from a previous question:
jQuery(document).ready(function($) {
let entries = [jQuery("#row .entry")].map(data => ({
issue: data.children[0].children[0].value,
value: data.children[1].children[0].value
}));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="row">
<div id="entry-wrapper">
<div class="entry">
<div class="text-wrapper">
<input type="text" class="text" value="ABC">
</div>
<div class="value-wrapper">
<input type="text" class="value" value="123">
</div>
</div>
<div class="entry">
<div class="text-wrapper">
<input type="text" class="text" value="DEF">
</div>
<div class="value-wrapper">
<input type="text" class="value" value="456">
</div>
</div>
</div>
</div>
Because of CSS I needed to wrap everything into some divs and wrappers and now I'm unable to get every text and the associated value in my array of objects. What I'm doing wrong?

You shouldn't wrap the jQuery object inside an array. That's setting data to the jQuery collection, not the elements.
jQuery has its own map() method, which you can use to loop over the elements in a collection (note that it takes arguments in the opposite order of Array.prototype.map()). It returns a jQuery object, but you can call .get() to convert that to an ordinary array.
jQuery(document).ready(function($) {
let entries = $("#row .entry").map((i, data) => ({
issue: data.children[0].children[0].value,
value: data.children[1].children[0].value
})).get();
console.log(entries);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="row">
<div id="entry-wrapper">
<div class="entry">
<div class="text-wrapper">
<input type="text" class="text" value="ABC">
</div>
<div class="value-wrapper">
<input type="text" class="value" value="123">
</div>
</div>
<div class="entry">
<div class="text-wrapper">
<input type="text" class="text" value="DEF">
</div>
<div class="value-wrapper">
<input type="text" class="value" value="456">
</div>
</div>
</div>
</div>

To turn a jQuery collection into a standard Array, you should not do:
[jQuery("#row .entry")]
...as this creates an array with just one value, and that value is the jQuery collection.
Instead use the method that jQuery provides for this purpose, i.e. get():
Without a parameter, .get() returns an array of all of the elements
So:
jQuery("#row .entry").get()

You can use the Array.from method to convert the jQuery collection to a JavaScript array.
jQuery(document).ready(function($) {
let entries = Array.from(jQuery("#row .entry")).map(data =>({
issue: data.children[0].children[0].value,
value: data.children[1].children[0].value
})).forEach(el => {
console.log(el);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="row">
<div id="entry-wrapper">
<div class="entry">
<div class="text-wrapper">
<input type="text" class="text" value="ABC">
</div>
<div class="value-wrapper">
<input type="text" class="value" value="123">
</div>
</div>
<div class="entry">
<div class="text-wrapper">
<input type="text" class="text" value="DEF">
</div>
<div class="value-wrapper">
<input type="text" class="value" value="456">
</div>
</div>
</div>
</div>

How to use selector to get value under DOM using Jquery

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());
});

how to get a textbox value from dynamically created div

I am creating dynamic div with html elements and i need to get value that textbox
This is my dynamic created content now i need to get the
<div id="TextBoxContainer">
<div id="newtextbox1"> // this id is dynamic id
<div class="row cells2">
<div class="cell">
<label>Patient Name</label>
<div class="input-control text full-size">
<input type="text" id="PatientName1" placeholder="Patient Name"/> // this id is dynamic id
</div>
</div>
<div class="cell">
<label>Patient ICNo</label>
<div class="input-control text full-size" >
<input type="text" id="PatientICNo" placeholder="Patient ICNo"/>
</div>
</div>
</div>
</div>
</div>
here i am trying to get value in jquery
if ($("#TextBoxContainer") != null && $("#TextBoxContainer").length > 0) {
var count = 1;
$("#TextBoxContainer").each(function () {
debugger;
var Pid = "input#PatientName" + count;
var childdiv = "div#newtextbox" + count;
count++;
var patientname = $(this).closest(childdiv).children(Pid).val();
});
}

Here you go with a solution https://jsfiddle.net/p9ywL4pm/1/
if ($("#TextBoxContainer") != null && $("#TextBoxContainer").length > 0) {
var count = 1;
$("#TextBoxContainer").children().each(function () {
var Pid = "input#PatientName" + count;
var patientname = $(this).find(Pid).val();
console.log(Pid, patientname);
count++;
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="TextBoxContainer">
<div id="newtextbox1">
<div class="row cells2">
<div class="cell">
<label>Patient Name</label>
<div class="input-control text full-size">
<input type="text" id="PatientName1" placeholder="Patient Name" />
</div>
</div>
<div class="cell">
<label>Patient ICNo</label>
<div class="input-control text full-size" >
<input type="text" id="PatientICNo" placeholder="Patient ICNo"/>
</div>
</div>
</div>
</div>
<div id="newtextbox2">
<div class="row cells2">
<div class="cell">
<label>Patient Name</label>
<div class="input-control text full-size">
<input type="text" id="PatientName2" placeholder="Patient Name"/>
</div>
</div>
<div class="cell">
<label>Patient ICNo</label>
<div class="input-control text full-size" >
<input type="text" id="PatientICNo" placeholder="Patient ICNo"/>
</div>
</div>
</div>
</div>
</div>
I considered two child elements inside #TextBoxContainer container.
Change the #PatientICNo input to
<input type="text" class="PatientICNo" placeholder="Patient ICNo"/>
Use class instead of ID because ID need to unique.
Hope this will help you.

var arrOfValue =[];
$('.input-control text full-size [type="text"]').each(function() { arrOfValue .push($(this).val())})
The arrOfValue will have all the text, use index to get the value.

jQuery val() doesn't update value in .html()

I have an HTML page generated with some default values for input fields. Here is the HTML and JavaScript:
$('#trigger').click(function () {
var content = $(this).parent().find('.content');
content.find('#name').val("Young man");
content.find('#age').val("25");
alert(content.find('#name').val());
alert(content.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<a id="trigger" href="#">Know!</a>
<div class="content">
<div>
<label>Name:</label>
<input type="text" id="name" value="dummy">
</div>
<div>
<label>Age:</label>
<input type="text" id="age" value="dummy">
</div>
</div>
</div>
I am trying to get the div assigned to a variable, then change the values of name and age through this handle. The first alert method confirms that they are changed. But why is content.html() still outputs the original html? How can I make html() output the updated data?

jQuery .val() method never updates the value attribute. You can change it with .attr() method.
$('#trigger').click(function() {
var content = $(this).parent().find('.content');
content.find('#name').attr("value", "Young man");
content.find('#age').attr("value", "25");
alert(content.find('#name').val());
alert(content.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<a id="trigger" href="#">Know!</a>
<div class="content">
<div>
<label>Name:</label>
<input type="text" id="name" value="dummy">
</div>
<div>
<label>Age:</label>
<input type="text" id="age" value="dummy">
</div>
</div>
</div>

Assign the new value using attr().
$('#trigger').click(function () {
var content = $(this).parent().find('.content');
content.find('#name').attr("value", "Young man");
content.find('#age').attr("value", "25");
console.log(content.find('#name').val());
console.log(content.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<a id="trigger" href="#">Know!</a>
<div class="content">
<div>
<label>Name:</label>
<input type="text" id="name" value="dummy">
</div>
<div>
<label>Age:</label>
<input type="text" id="age" value="dummy">
</div>
</div>
</div>

Loop inside a element with a specific class

I have the below HTML. Can someone please tell me how I can loop through all the divs with the class "tab-pane" and see if any element inside the div has a class
"input-validation-error" and then just change the background color of that div.
In this example the first div and the third div with "tab pane" class should have their background property change. I know how to loop through each but not sure how to look for specific properties inside child elements.
<ul id="sellerAppTabs">
<li title="General Information">Section I</li>
<li title="Affiliate Information">Section II</li>
<li title="Affiliate Information">Section II</li>
</ul>
<div class="tab-pane" id="tab">
<div class="test1">
<h1>Some Data</h1>
<input type="text" class="input-validation-error">
<input type="text" class="input-validation-error">
</div>
</div>
<div class="tab-pane" id="tab1">
<div class="test2">
<h1>Some Data</h1>
<input type="text">
<input type="text">
</div>
</div>
<div class="tab-pane" id="tab2">
<div class="test1">
<h1>Some Data</h1>
<input type="text" class="input-validation-error">
<input type="text" class="input-validation-error">
</div>
</div>
So I have to loop through the a tags in the sellerAppTabs ul section which have their ids matched to the divs and then if the div has any "input-validation-error" class then I have to change the background color of the li above the a tag.

Use .has() or :has()
$('.tab-pane').has('.input-validation-error').css({background: '#C55'})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-pane">
<div class="test1">
<h1>Some Data</h1>
<input type="text" class="input-validation-error">
<input type="text" class="input-validation-error">
</div>
</div>
<div class="tab-pane">
<div class="test2">
<h1>Some Data</h1>
<input type="text">
<input type="text">
</div>
</div>
<div class="tab-pane">
<div class="test1">
<h1>Some Data</h1>
<input type="text" class="input-validation-error">
<input type="text" class="input-validation-error">
</div>
</div>

this worked for me:
<script type="text/javascript">
var els = document.getElementsByClassName('input-validation-error');
for(var x=0; x<els.length; x++){
if( els[x].value == '' ){
els[x].parentNode.parentNode.style.backgroundColor = '#f00';
}
}
</script>

No need to loop. Just use a :has() selector
$('.tab-pane:has(.input-validation-error)').css('background', 'red');
$('.tab-pane:has(.input-validation-error)').css('background', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="tab-pane">
<div class="test1">
<h1>Some Data</h1>
<input type="text" class="input-validation-error">
</input>
<input type="text" class="input-validation-error">
</input>
</div>
</div>
<div class="tab-pane">
<div class="test2">
<h1>Some Data</h1>
<input type="text">
</input>
<input type="text">
</input>
</div>
</div>
<div class="tab-pane">
<div class="test1">
<h1>Some Data</h1>
<input type="text" class="input-validation-error">
</input>
<input type="text" class="input-validation-error">
</input>
</div>
</div>

Since you are using jQuery, a simple .each() function would suffice. Followed by .find() for the input validation class
$('.tab-pane').each(function(){
$(this).find('.input-validation-error').each(function() {
//change the color
});
});

You can do this with each and find:
$(".tab-pane").each(function() {
if ($(this).find(".input-validation.error")) {
// $(this) points to the div.tab-pane!
$(this).css("background-color", "red")
}
});

You could use JQuery filter functionality:
$('.tab-pane')
.filter(':has(.input-validation-error)');
.css('background', 'red');

Get the elements with querySelectorAll
Filter the desired elements with filter
Iterate with forEach
[].filter.call(
document.querySelectorAll('.tab-pane'),
function(elem) { return elem.querySelector('.input-validation-error'); }
).forEach(function(elem) { elem.style.backgroundColor = color; });
[].filter.call(
document.querySelectorAll('.tab-pane'),
function(elem) { return elem.querySelector('.input-validation-error'); }
).forEach(function(elem) { elem.style.backgroundColor = '#C55'; });
<div class="tab-pane">
<div class="test1">
<h1>Some Data</h1>
<input type="text" class="input-validation-error"/>
<input type="text" class="input-validation-error"/>
</div>
</div>
<div class="tab-pane">
<div class="test2">
<h1>Some Data</h1>
<input type="text"/>
<input type="text"/>
</div>
</div>
<div class="tab-pane">
<div class="test1">
<h1>Some Data</h1>
<input type="text" class="input-validation-error"/>
<input type="text" class="input-validation-error"/>
</div>
</div>

Try and stick with Vanilla JS by using getElementsByClassName().
getElementsByClassName() returns a list of elements of which you can iterate through for your operations.

Categories