Javascript loop through multiple forms, get all input values

Javascript loop through multiple forms, get all input values - javascript

I need to build an object from multiple forms input values without using jQuery.
<div id="formMain">
<form id="form_id_1" class="formClass">
<div id="fullname">
<p>Full Name</p>
<input type="text" class="inputClass" name="name" value="Joe">
<br/>
<input type="text" class="inputClass" name="name2" value="Doe">
</div>
<div id="Address">
<p>Address</p>
<input type="text" class="inputClass" name="address" value="1st Maint Street">
</div>
</form>
<form id="form_id_2" class="formClass">
<div id="fullname">
<p>Full Name</p>
<input type="text" class="inputClass" name="name" id="name1" value="Mary">
<br/>
<input type="text" class="inputClass" name="name2" id="name2" value="Doe">
</div>
<div id="Address">
<p>Address</p>
<input type="text" class="inputClass" name="address" id="addressId" value="2nd Maint Street">
</div>
</form>
</div>
final result should be object:
"profile":[
{
"name":"Joe",
"name2":"Doe",
"address":"1st Maint Street",
},
{
"name":"Mary",
"name2":"Doe",
"address":"2nd Maint Street",
},
The forms can be added dynamically by user, so I can have multiple forms embedded in the main form div.
I´m able to get the the first form values, but I´m getting stuck when multiple forms are added, I trying to loop throough the main element but just not working. The above is my 1st code sample working.
var formdata = document.getElementById('formMain').getElementsByTagName('input')
var form = [].map.call(formdata, function( input ) {
return {'value':input.value};
});

Have a look at this - using querySelectorAll, forEach and push.
Alternatively Array.map as long as the callback returns the objects created.
the HTML element collection needs to be cast to an Array to use map
console.log("Using forEach on the HTML collection")
let profile = [];
document.querySelectorAll("form").forEach(f => {
let obj = {};
f.querySelectorAll("input").forEach(ele => obj[ele.name] = ele.value || "");
profile.push(obj)
})
console.log(profile)
// ---------------------------------------------------------------
console.log("Using Array.map on a HTML collection cast to Array")
profile = [...document.querySelectorAll("form")].map(f => {
let obj = {};
f.querySelectorAll("input").forEach(ele => obj[ele.name] = ele.value || "");
return obj;
})
console.log(profile)
<div id="formMain">
<form id="form_id_1" class="formClass">
<div id="fullname">
<p>Full Name</p>
<input type="text" class="inputClass" name="name" value="Joe">
<br/>
<input type="text" class="inputClass" name="name2" value="Doe">
</div>
<div id="Address">
<p>Address</p>
<input type="text" class="inputClass" name="address" value="1st Maint Street">
</div>
</form>
<form id="form_id_2" class="formClass">
<div id="fullname">
<p>Full Name</p>
<input type="text" class="inputClass" name="name" id="name1" value="Mary">
<br/>
<input type="text" class="inputClass" name="name2" id="name2" value="Doe">
</div>
<div id="Address">
<p>Address</p>
<input type="text" class="inputClass" name="address" id="addressId" value="2nd Maint Street">
</div>
</form>
</div>

var forms = document.querySelectorAll("form");
var result = Array.from(forms).map(a => {
var obj = {};
Array.from(a.querySelectorAll("[name]")).forEach(b => {
obj[b.getAttribute("name")] = b.value;
});
return obj;
});
console.log(result);
<div id="formMain">
<form id="form_id_1" class="formClass">
<div id="fullname">
<p>Full Name</p>
<input type="text" class="inputClass" name="name" value="Joe">
<br/>
<input type="text" class="inputClass" name="name2" value="Doe">
</div>
<div id="Address">
<p>Address</p>
<input type="text" class="inputClass" name="address" value="1st Maint Street">
</div>
</form>
<form id="form_id_2" class="formClass">
<div id="fullname">
<p>Full Name</p>
<input type="text" class="inputClass" name="name" id="name1" value="Mary">
<br/>
<input type="text" class="inputClass" name="name2" id="name2" value="Doe">
</div>
<div id="Address">
<p>Address</p>
<input type="text" class="inputClass" name="address" id="addressId" value="2nd Maint Street">
</div>
</form>
</div>

querySelectorAll (mdn) can be used to fetch the forms and inputs.
flatMap (mdn) can be used to map forms to inputs.
spread syntax [...iterable] (mdn) can be used to convert the node list returned by querySelectorAll to an array.
let inputs = [...document.querySelectorAll('form')].flatMap(a => [...a.querySelectorAll('input')]);
console.log(inputs);
<div id="formMain">
<form id="form_id_1" class="formClass">
<div id="fullname">
<p>Full Name</p>
<input type="text" class="inputClass" name="name" value="Joe">
<br/>
<input type="text" class="inputClass" name="name2" value="Doe">
</div>
<div id="Address">
<p>Address</p>
<input type="text" class="inputClass" name="address" value="1st Maint Street">
</div>
</form>
<form id="form_id_2" class="formClass">
<div id="fullname">
<p>Full Name</p>
<input type="text" class="inputClass" name="name" id="name1" value="Mary">
<br/>
<input type="text" class="inputClass" name="name2" id="name2" value="Doe">
</div>
<div id="Address">
<p>Address</p>
<input type="text" class="inputClass" name="address" id="addressId" value="2nd Maint Street">
</div>
</form>
</div>

you can try like below
var formMain = document.getElementById("formMain");
var formMresultAreaain = document.getElementById("resultArea");
var result = [];
var formData = '<form class="formClass">' +
'<div id="fullname">' +
'<p>Full Name</p>' +
'<input type="text" class="inputClass" name="name" value="Joe">' +
'<br/>' +
'<input type="text" class="inputClass" name="name2" value="Doe">' +
'</div>' +
'<div id="Address">' +
'<p>Address</p>' +
'<input type="text" class="inputClass" name="address" value="1st Maint Street">' +
'</div>' +
'</form>';
function addForm() {
formMain.innerHTML += formData;
}
function submitForms() {
var forms = document.getElementsByTagName("form");
var inputs;
var tempResult = {};
result = [];
for (var i = 0; i < forms.length; i++) {
inputs = forms[i].getElementsByTagName("input");
tempResult = {};
for (var j = 0; j < inputs.length; j++)
tempResult[inputs[j].name] = inputs[j].value;
result.push(tempResult);
}
console.log(result);
}
<input type="button" onclick="addForm()" value="Add Form" />
<div id="formMain">
</div>
<hr/>
<input type="button" onclick="submitForms()" value="Submit" />

Related

How to loop through text fields and concatenate the result using javascript

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>

Can not get the expected json out put from input values

I am trying but can not succeed to get my expected json output, Here is my code:
my html
<div class="form-field">
<input type='text' class='name' value="" >
<input name="" id="title" type="text" value="" size="40" aria-
required="true" class='value'><input type="button" value="convert"
id="convert"/><br>
<input type='text' class='name' value="">
<input name="" id="title" type="text" value="" size="40" aria-
required="true" class='value'>
</div>
my js:
var $index=1;
function convert(){
var $namevalue=[];
$('.name').each(function () {
$namevalue.push($(this).val());
});
// $namevalue= $('.name').val();
for(var i=0; i<$namevalue.length; i++){
//
$('.value').attr("name",$namevalue[i]);
}
}
// var $index=1;
$('#convert').click(function(){
$index++;
convert();
});
output of above code:
{"height":["blue","24"]}
HTML view:
But my expected output is like this:
{"color":"blue","height":27}
How can i achieve this, please help.

declare $namvevalue as an object var $namevalue={}. Then for each .name use its value as a key and next input val as value.
Also note your html as multiple elements with same id, you should not do that. use different id for each element.
var $index=1;
function convert(){
var $namevalue={};
$('.name').each(function () {
$namevalue[$(this).val()] = $(this).next('input').val();
});
// $namevalue= $('.name').val();
for(var i=0; i<$namevalue.length; i++){
//
$('.value').attr("name",$namevalue[i]);
}
console.log($namevalue);
}
// var $index=1;
$('#convert').click(function(){
$index++;
convert();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-field">
<input type='text' class='name' value="" >
<input name="" id="title1" type="text" value="" size="40" aria-
required="true" class='value'><input type="button" value="convert"
id="convert"/><br>
<input type='text' class='name' value="">
<input name="" id="title2" type="text" value="" size="40" aria-
required="true" class='value'>
</div>

You can use the index parameter of .each to access the .value field with the same index. You'll also have to change namevalue to an object instead of an array as you expect an object as the output.
e.g.
function convert() {
var namevalue = {};
var $vals = $('.value');
$('.name').each(function(index) {
namevalue[$(this).val()] = $vals.eq(index).val();
});
return namevalue;
}
$('#convert').click(function() {
var namevals = convert();
console.log(namevals);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-field">
<input type='text' class='name' value="">
<input name="" id="title" type="text" value="" size="40" aria- required="true" class='value'>
<input type="button" value="convert" id="convert" /><br>
<input type='text' class='name' value="">
<input name="" id="title" type="text" value="" size="40" aria- required="true" class='value'>
</div>

How to get data-attribute value of elements which is greater than given value using jquery?

I have few textboxes and data-attrribute for installment number.
<input type="text" id="54" data-instno="12"/>
<input type="text" id="124" data-instno="13"/>
<input type="text" id="88" data-instno="14"/>
<input type="text" id="126" data-instno="15"/>
<input type="text" id="102" data-instno="16"/>
<input type="text" id="8" data-instno="17"/>
<input type="text" id="87" data-instno="18"/>
<input type="text" id="112" data-instno="19"/>
If my installment number is 15. i want to get controls have data-instno>=15. that means last 5 textboxes in this case.

Use jQuery Has Attribute Selector [name] to selecting target elements and use .filter() to filtering element has data-instno great than 15.
$("[data-instno]").filter(function(){
return $(this).attr("data-instno") >= 15;
}).doSomething();
$("[data-instno]").filter(function(){
return $(this).attr("data-instno") >= 15;
}).css("background", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="54" data-instno="12"/>
<input type="text" id="124" data-instno="13"/>
<input type="text" id="88" data-instno="14"/>
<input type="text" id="126" data-instno="15"/>
<input type="text" id="102" data-instno="16"/>
<input type="text" id="8" data-instno="17"/>
<input type="text" id="87" data-instno="18"/>
<input type="text" id="112" data-instno="19"/>
If you want to get value of data-instno use this
var arr = $("[data-instno]").map(function(){
return $(this).attr("data-instno");
}).get().filter(function(value){
return value >= 15;
});
var arr = $("[data-instno]").map(function(){
return $(this).attr("data-instno");
}).get().filter(function(value){
return value >= 15;
});
console.log(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="54" data-instno="12"/>
<input type="text" id="124" data-instno="13"/>
<input type="text" id="88" data-instno="14"/>
<input type="text" id="126" data-instno="15"/>
<input type="text" id="102" data-instno="16"/>
<input type="text" id="8" data-instno="17"/>
<input type="text" id="87" data-instno="18"/>
<input type="text" id="112" data-instno="19"/>

Just plain JavaScript:
console.log(
[].filter.call(document.getElementsByTagName('INPUT'),
function(elem) {
return elem.dataset.instno >= 15;
})
);
<input type="text" id="54" data-instno="12"/>
<input type="text" id="124" data-instno="13"/>
<input type="text" id="88" data-instno="14"/>
<input type="text" id="126" data-instno="15"/>
<input type="text" id="102" data-instno="16"/>
<input type="text" id="8" data-instno="17"/>
<input type="text" id="87" data-instno="18"/>
<input type="text" id="112" data-instno="19"/>

var arrNumber = new Array();
$('input[type=text]').each(function(){
if($(this).attr('data-instno') >= 15){
arrNumber.push($(this).attr('data-instno'));
}
});
use this you will get this as an array

How do I create a matrix in html and then parse it to javascript?

So, I am fairly new to JavaScript and I want to create a box for the user to input matrix mxn then parse the input to JS. I know how to create row and column in html, but I have no idea with the JS.
This is what I have so far.
<div class="container">
<div class="well well-lg">
<h1 class="text-center">Jacobian Method</h1>
<p>Masukkan matrik</p>
<form id="inputField" role="form">
<input type="text" name="field00" size="3">
<input type="text" name="field01" size="3">
<input type="text" name="field02" size="3">
<input type="text" name="field03" size="3">
<br>
<input type="text" name="field10" size="3">
<input type="text" name="field11" size="3">
<input type="text" name="field12" size="3">
<input type="text" name="field13" size="3">
<br>
<input type="text" name="field20" size="3">
<input type="text" name="field21" size="3">
<input type="text" name="field22" size="3">
<input type="text" name="field23" size="3">
<br>
<input type="submit" onclick="calcJacobian()" value="calculate" name="calculate" class="btn btn-info">
</form>
<div id="resultField">
</div>
</div>
</div>
<script type="text/javascript">
function calcJacobian(){
var myArr = document.forms.inputField;
var myControls = myArr.elements['p_id'];
for(var i =0; i<myControls.length; i++){
var aControl = myControls[i];
document.getElementById("resultField").append=aControl;
}
}
</script>

After a few adjustments, the code is displayed below. Note that the variable name_value_array holds a map which store all values from the table, having as the key the input name and as stored value the input value.
<div class="container">
<div class="well well-lg">
<h1 class="text-center">Jacobian Method</h1>
<p>Masukkan matrik</p>
<form id="inputField" role="form">
<input type="text" name="field00" size="3">
<input type="text" name="field01" size="3">
<input type="text" name="field02" size="3">
<input type="text" name="field03" size="3">
<br>
<input type="text" name="field10" size="3">
<input type="text" name="field11" size="3">
<input type="text" name="field12" size="3">
<input type="text" name="field13" size="3">
<br>
<input type="text" name="field20" size="3">
<input type="text" name="field21" size="3">
<input type="text" name="field22" size="3">
<input type="text" name="field23" size="3">
<br>
<input type="button" onclick="calcJacobian()" value="calculate" name="calculate" class="btn btn-info">
</form>
<div id="resultField">
</div>
</div>
</div>
<script type="text/javascript">
function calcJacobian() {
var myArr = document.forms.inputField;
var myControls = myArr;
var name_value_array = [];
for (var i = 0; i < myControls.length; i++) {
var aControl = myControls[i];
// don't print the button value
if (aControl.type != "button") {
// store value in a map
name_value_array.push(aControl.value, aControl.name);
document.getElementById("resultField").appendChild(document.createTextNode(aControl.value + " "));
}
}
// show map values as a popup
alert(JSON.stringify(name_value_array));
}
</script>

Try the CSS selector string for 'starts with' aka ^= to grab all values with names starting with field, perhaps make it an array so as to save the name value numbers at the same time:
window.calcJacobian = function() {
var myArr = document.querySelectorAll('input[name^="field"]')
for (var i = 0; i < myArr.length; i++) {
var results = "\nfield: " + myArr[i].name.substring(5) + ", value: " + myArr[i].value;
var text = document.createTextNode(results);
document.querySelector('#resultField').appendChild(text);
}
}
#resultField {
white-space: pre-line;
}
<div class="container">
<div class="well well-lg">
<h1 class="text-center">Jacobian Method</h1>
<p>Masukkan matrik</p>
<form id="inputField" role="form">
<input type="text" name="field00" size="3" />
<input type="text" name="field01" size="3" />
<input type="text" name="field02" size="3" />
<input type="text" name="field03" size="3" />
<br>
<input type="text" name="field10" size="3" />
<input type="text" name="field11" size="3" />
<input type="text" name="field12" size="3" />
<input type="text" name="field13" size="3" />
<br>
<input type="text" name="field20" size="3" />
<input type="text" name="field21" size="3" />
<input type="text" name="field22" size="3" />
<input type="text" name="field23" size="3" />
<br>
<input type="button" onclick="calcJacobian()" value="calculate" name="calculate" class="btn btn-info" />
</form>
<div id="resultField"></div>
</div>
</div>

jquery keyup event on text box get id

I have build a form in html where dynamically generate some input field with dynamic ids(e.g id_1, id_2, id_3 etc). Now I want to create a event when I keyup on each input box.
here is my html file
<div id="addinput">
<div id="innneraddinput">
<div class="inputDivId">
<input class="search" id="searchid" type="text" size="30" name="p_new" value="" placeholder="" />
</div>
<div class="inputDivId">
<input type="text" id="p_new" size="10" name="p_new" value="" placeholder="" />
</div>
<div class="inputDivId">
<input type="text" id="p_new" size="10" name="p_new" value="" placeholder="" />
</div>
<div class="inputDivId">
<input type="text" id="p_new" size="10" name="p_new" value="" placeholder="" />
</div>
<div class="inputDivId">
<input type="text" id="p_new" size="10" name="p_new" value="" placeholder="" />
</div>
<div class="inputDivId">
<input type="text" id="p_new" size="15" name="p_new" value="" placeholder="" />
</div>
Add
</div>
<div id="result"></div>
</div>

$("#innneraddinput input").keyup(function() {
var v = this.id;
});
If elements are created dynamically, use the on method:
$("#innneraddinput input").on("keyup", function() {
var v = this.id;
});

$("#innneraddinput input").keyup(function() {
var id = $(this).attr('id');
}

Develop Reference

JavaScript is the programming language of the Web.

Javascript loop through multiple forms, get all input values - javascript

Related

How to loop through text fields and concatenate the result using javascript

Can not get the expected json out put from input values

How to get data-attribute value of elements which is greater than given value using jquery?

How do I create a matrix in html and then parse it to javascript?

jquery keyup event on text box get id

Categories

Resources