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());
});
Related
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>
I need some help I have a drupal webform in which new form elements show conditionally if the previous text input has content.
What I’m trying to do is select all inputs that are currently visible and then specifically target the last one (the most recently shown).
The issue is this targets the last child within each .form-item rather than the last form item itself directly.
$(".webform").on("change", function() {
$(".form-item:visible").each(function() {
if ($(this).is(":last-of-type")) {
//Do whatever
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="webform">
<div class="form-item" style="display:block">
</div>
<div class="form-item" style="display:block">
</div>
<div class="form-item" style="display:block">
</div>
<div class="form-item" style="display:none">
</div>
</div>
You can simplify your flow by using this jQuery:last selector
$('.form-item:visible:last')
You may apply the below code on form field change or form submit, depending on your requirements.
<div class="webform">
<div class="form-item" style="display:block">
<input type="text" value="1" />
</div>
<div class="form-item" style="display:block">
<input type="text" value="2" />
</div>
<div class="form-item" style="display:block">
<input type="text" value="3" />
</div>
<div class="form-item" style="display:none">
<input type="text" value="4" />
</div>
</div>
<script>alert($(".form-item:visible:last input").val());</script>
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();
<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/
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>