my html looks like this:
<div id="Section1" class="divFiles">
<input type="text" name="file">
<input type="text" name="file">
<input type="text" name="file">
<input type="text" name="file">
</div>
<div id="Section2" class="divFiles">
<input type="text" name="file">
<input type="text" name="file">
<input type="text" name="file">
<input type="text" name="file">
</div>
I want to generate a list of objects with two properties: key, and listTitles, key is just the id of the div, and listTitles is a list of every value that is on the input fields. I don't have any problem retrieving the id of every div separately, but I'm not sure of which is the correct way to read by div all the values contained in their children inputs.
My goal is to have this results:
{key: Section1, listTitles: inputValue1Div1, inputValue2Div1, inputValue2Div1, inputValue2Div1 },
{key: Section2, listTitles: inputValue1Div2, inputValue2Div2, inputValue2Div2, inputValue2Div2 }
I'm using this code that is retrieving only the divs id, the problem is to fill the listTitles property with the input value fields of the current div. What I need to change?
var divElements = $(".divFiles");
var tests = [];
$.each(divElements, function () {
tests.push({ 'key': $(this).attr('id'), 'listTitles':$.each(JSON.parse($(this).children("input[name=file]").val()))});
})
You almost got it. Use .map().get() instead.
var divElements = $(".divFiles");
var tests = [];
$.each(divElements, function() {
tests.push({
'key': $(this).attr('id'),
'listTitles': $(this).children("input[name=file]").map(function(i, elem) {
return this.value;
}).get()
});
})
console.log(tests);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Section1" class="divFiles">
<input type="text" name="file" value="a">
<input type="text" name="file" value="b">
<input type="text" name="file" value="c">
<input type="text" name="file" value="d">
</div>
<div id="Section2" class="divFiles">
<input type="text" name="file" value="e">
<input type="text" name="file" value="f">
<input type="text" name="file" value="g">
<input type="text" name="file" value="h">
</div>
Related
<input type=file multiple> inputs many files and I want to associate them to separate forms!
<label for="hiddenInput" class="btn btnPrimary mr-2">
Browse
<input type="file" id="hiddenInput" class="js-file-input" multiple>
</label>
<form id="form" action="uploadOneImage.php" method="post" enctype="multipart/form-data">
<label><b>Tags</b> (optional)</label>
<input name="tags" type="text" name="tags" class="tags">
<label><b>Location</b> (optional)</label>
<input name="location" type="text" name="location" class="location">
<button id="submit" type="submit" class="btn btnPrimary">Submit</button>
</form>
As far as i understood you want to carry files to another <input type="file" multiple> which is under another form
add
<input type="file" id="otherInput" style="display:none" multiple/> under #form
in javascript:
document.querySelector('#hiddenInput').addEventListener('input', () => {
const dt = new DataTransfer();
const files = document.querySelector('#hiddenInput').files;
for(let i=0; i<files.length; i++){
const file = files[i];
dt.items.add(file);
}
document.querySelector('#otherInput').files = dt.files;
})
I need to write a javascript function that will loop through the input boxes and concatenates the text in each field together and displays the result in the result box. I tried multiple solutions and haven't been able to get any to work, I get that it needs an array of text fields but I can't seem to work it out.
<!DOCTYPE html>
<html>
<body>
<form id="myform">
<label for="text1">text1</label><br>
<input type="text" id="text1" name="text1"><br>
<label for="text2">text2</label><br>
<input type="text" id="text2" name="text2"><br>
<label for="text3">text3</label><br>
<input type="text" id="text3" name="text3"><br>
<label for="text4">text4</label><br>
<input type="text" id="text4" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" id="text5" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" id="text6" name="text6"><br>
<input type="button" onClick="myFunction()" value="Click This"><br>
<label for="result">result</label><br>
<input type="text" id="result" name="result">
</form>
<script>
function myFunction() {
var fields = [];
}
</script>
</body>
</html>
You can use filter and map
NOTE: I gave the button an ID of "btn"
document.getElementById('btn').addEventListener('click', function() {
const conc = [...document.querySelectorAll('#myform [id^=text]')] // id starts with text
.filter(fld => fld.value.trim() !== "") // not empty
.map(fld => fld.value) // store value
document.getElementById('result').value = conc.join(","); // join with comma
})
<form id="myform">
<label for="text1">text1</label><br>
<input type="text" id="text1" name="text1"><br>
<label for="text2">text2</label><br>
<input type="text" id="text2" name="text2"><br>
<label for="text3">text3</label><br>
<input type="text" id="text3" name="text3"><br>
<label for="text4">text4</label><br>
<input type="text" id="text4" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" id="text5" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" id="text6" name="text6"><br>
<input type="button" id="btn" value="Click This"><br>
<label for="result">result</label><br>
<input type="text" id="result" name="result">
</form>
In one pass:
document.getElementById('btn').addEventListener('click', function() {
const res = [];
[...document.querySelectorAll('#myform [id^=text]')]
.forEach(fld => { const val = fld.value.trim(); if (val !== "") res.push(val) })
document.getElementById('result').value = res.join(","); // join with comma
})
<form id="myform">
<label for="text1">text1</label><br>
<input type="text" id="text1" name="text1"><br>
<label for="text2">text2</label><br>
<input type="text" id="text2" name="text2"><br>
<label for="text3">text3</label><br>
<input type="text" id="text3" name="text3"><br>
<label for="text4">text4</label><br>
<input type="text" id="text4" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" id="text5" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" id="text6" name="text6"><br>
<input type="button" id="btn" value="Click This"><br>
<label for="result">result</label><br>
<input type="text" id="result" name="result">
</form>
function myFunction() {
const data = document.querySelectorAll("#myform input[type='text'][id^=text]");
//console.log(data);
var fields = [];
data.forEach(item => {
if (item.value != '') {
fields.push(item.value)
}
})
document.getElementById("result").value = fields.join(",")
}
<form id="myform">
<label for="text1">text1</label><br>
<input type="text" id="text1" name="text1"><br>
<label for="text2">text2</label><br>
<input type="text" id="text2" name="text2"><br>
<label for="text3">text3</label><br>
<input type="text" id="text3" name="text3"><br>
<label for="text4">text4</label><br>
<input type="text" id="text4" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" id="text5" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" id="text6" name="text6"><br>
<input type="button" onClick="myFunction()" value="Click This"><br>
<label for="result">result</label><br>
<input type="text" id="result" name="result">
</form>
Based on what I learned and what I read here on Stack as well, I wrote a code that should get all the values of a specified class of input and pushing them into an array.
What I think this jQuery sript should do is:
create an empty array called myArray
when #subButton is clicked an iteration on the <input class=".req" starts, pushing the value of each <input class=".req" into myArray
The problem is that anything is displayed in the console, as nothing happened, so I guess there's a conceptual/writing error.
jQuery :
$(document).ready(function(){
var myArray = [];
$('#subButton').on('click', function() {
$('.req').each(function() {
myArray.push($(this).val());
console.log(myArray);
});
});
});
HTML :
<form id="iForm">
<input type="text" id="i1" class=".req" placeholder="Name">
<input type="text" id="i2" placeholder="Surname">
<input type="text" id="i3" placeholder="Text A">
<input type="text" id="i4" class=".req" placeholder="Text B">
<input type="button" id="subButton" value="Registrati">
</form>
You've to remove the . before the classes in your HTML inputs :
<input type="text" id="i1" class=".req" placeholder="Name">
__________________________________^
<input type="text" id="i4" class=".req" placeholder="Text B">
__________________________________^
Should be :
<input type="text" id="i1" class="req" placeholder="Name">
<input type="text" id="i4" class="req" placeholder="Text B">
Hope this helps.
$(document).ready(function(){
var myArray = [];
$('#subButton').on('click', function() {
$('.req').each(function() {
myArray.push($(this).val());
console.log(myArray);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="iForm">
<input type="text" id="i1" class="req" placeholder="Name">
<input type="text" id="i2" placeholder="Surname">
<input type="text" id="i3" placeholder="Text A">
<input type="text" id="i4" class="req" placeholder="Text B">
<input type="button" id="subButton" value="Registrati">
</form>
Having fixed your class attributes to remove the leading period character, you can use:
var myArray = $('.req').get().map(function(el) { return el.value });
Where $(...).get() converts the jQuery collection into a standard array, and .map extracts the field values.
This is somewhat cleaner than using .each with a push.
I have a form with variable number of inputs as an array
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
The idea is when i put some value in the first field (foo[1]) i need the jQuery or Javascript copy the value from #foo[1] into #foo[2], #foo[3], etc depending on the array.
Do you need following behavior :
$(document).ready(function(){
$("input[id^=foo\\[]").prop("disabled",true); //disable all elements first
$("input#foo\\[1\\]").prop("disabled",false); //then enable the first one
$("input#foo\\[1\\]").change(function(){
var source = $(this);
var currentVal = $(source).val();
$("input[id^=foo\\[]").each(function(){
if(!$(this).is(source))
$(this).val(currentVal);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value=""/>
<input type="text" id="foo[3]" name="foo[3]" value=""/>
<input type="text" id="foo[4]" name="foo[4]" value=""/>
<input type="text" id="foo[5]" name="foo[5]" value=""/>
</form>
$('input').on('input', function(){
$(this).siblings().val($(this).val());
});
Couldn't tell if you just wanted the first or all. If just the first, you can target with an id or jQuery.
$('input').eq(0).on('input', function(){});
Something like this
HTML
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
JavaScript
$("input[id=foo\\[1\\]").on("input", function (){
$(this).siblings().val($(this).val());
});
And if you want the other to be readonly:
$("input[id^=foo\\[]:not([id=foo\\[1\\]])").attr("readonly", "readonly");
I have page with many inputs inside a set of different divs.
A subset of those inputs are created dinamically and they can be also deleted.
By creating and deleting elements i could have a list of inputs named as shown:
<div id="first">
<input type="text" name="elem[0][elem_option][0][price]" value="">
<input type="text" name="elem[0][elem_option][1][price]" value="">
<input type="text" name="elem[0][elem_option][5][price]" value="">
<input type="text" name="elem[0][elem_option][21][price]" value="">
<input type="text" name="elem[3][elem_option][0][price]" value="">
<input type="text" name="elem[3][elem_option][1][price]" value="">
<input type="text" name="elem[3][elem_option][3][price]" value="">
<input type="text" name="elem[3][elem_option][8][price]" value="">
</div><!-- first -->
<div id="second">
<input type="text" name="elem[1][elem_option][1][price]" value="">
<input type="text" name="elem[1][elem_option][2][price]" value="">
<input type="text" name="elem[1][elem_option][7][price]" value="">
<input type="text" name="elem[1][elem_option][8][price]" value="">
<input type="text" name="elem[5][elem_option][5][price]" value="">
<input type="text" name="elem[5][elem_option][6][price]" value="">
<input type="text" name="elem[5][elem_option][8][price]" value="">
<input type="text" name="elem[5][elem_option][9][price]" value="">
</div><!-- second-->
....
I need to select all elements with a name that ends with [price] and save in a different variable of each div.
I tried a jQuery selector used as method of getelementbyid:
first_price_inputs = document.getElementById('first').jQuery('input[name$="[price]"]')
second_price_inputs = document.getElementById('second').jQuery('input[name$="[price]"]')
But i get this error:
Uncaught TypeError: Object #<HTMLDivElement> has no method 'jQuery'
please help!
Try this:
first_price_inputs = jQuery('#first input[name$="[price]"]');
second_price_inputs = jQuery('#second input[name$="[price]"]');
Look here: http://jsfiddle.net/qRDkq/
try
first_price_inputs = jQuery('#first > input[name$="[price]"]')
#Cherniv: its not an input of ID #first, but a child of the element with ID #firstof type input. So the descendant selector should be used afaik?