Asked
Viewed32 times
I have a form with several text inputs and I need to get the name and value of the input to generate an object. I don’t know if this would be possible, but so far this is my code:
function getData(){
const test = document.querySelectorAll('input')
test.forEach((item) => {
console.log('item:', item.name + item.value)
//example
{
item.name = item.value
....
}
//example
})
}
My intention is that item.name is the object’s key name and item.value is the value.
This will do:
function getData(){
const test = document.querySelectorAll('input')
const result = {}
test.forEach((item) => {
console.log('item:', item.name + item.value)
result[item.name] = item.value
})
return result
}
You could achieve the same result with (barely) less code using test.reduce()
function getData(){
const test = document.querySelectorAll('input')
return test.reduce((result, item) => {
console.log('item:', item.name + item.value)
result[item.name] = item.value
return result
}, {})
}
Pygy is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
You need create a new object add data to it from fromEach
then return it:
function getData(){
const test = document.querySelectorAll('input');
const returnObj = {};
test.forEach((item) => {
returnObj[item.name] = item.value;
})
return returnObj;
}
console.log(getData());
<input name="test1" value="blah1">
<input name="test2" value="blah2a">
<input name="test3" value="blah3b">
<input name="test4" value="blah4c">
<input name="test6" value="blah6">
You can turn your results into an Array
by passing your query results into Array.from
then map()
the array into a shape that Object.fromEntries()
is looking for to achieve this result:
function getData(){
const elements = document.querySelectorAll('input');
return Object.fromEntries(
Array.from(elements).map(
el => ([el.name, el.value])
)
);
}
console.log(getData());
<input name="test1" value="blah1">
<input name="test2" value="blah2a">
<input name="test3" value="blah3b">
<input name="test4" value="blah4c">
<input name="test6" value="blah6">
2
Use HTMLFormElement and HTMLFormControlsCollection interfaces to reference any and all form controls✥ and <form>
.
✥Form controls are: <button>
, <fieldset>
, <input>
, <object>
, <output>
, <select>
and <textarea>
Details are commented in example
// Reference the <form>
const form = document.forms.data;
/*
Reference all form controls within <form>.
Form controls includes <input>, <select>, <textarea>, etc.
*/
const IO = form.elements;
/*
Pass in one or more DOM objects (as a
NodeList, array, etc.
*/
/**
* Run the DOM objects/nodes through .flatMap()
* Check each node...
* if it's a radio button AND it isn't checked...
* OR node doesn't have a .value...
* Return an empty array []
* (in .flatMap() returning an empty array results in
* nothing as if node was skipped.)
*/
/**
* Return an object literal with a key/value of:
* "name": node.name,
* "value": node.value
*/
const getData = (nodes) => {
return [...nodes].flatMap(node => {
if (node.type === 'radio' && !node.checked || node.value === '') {
return [];
}
return Object.assign({}, {
['name']: node.name,
['value']: node.value
})
});
};
console.log(getData(IO));
<form id='data'>
<input name="A" value="Alpha">
<input name="B" value="Beta">
<input name="C" value="Gamma">
<input name="D" value="Delta">
<input name="rad" type="radio" value="1">
<input name="rad" type="radio" value="2">
<input name="rad" type="radio" value="3" checked>
<input name="rad" type="radio" value="4">
<select id='sel' name="sel">
<option disabled></option>
<option value="1">I</option>
<option value="2">II</option>
<option value="3">III</option>
<option selected value="4">IV</option>
</select>
<textarea name="text"></textarea>
</form>
Here’s a non-naive solution that properly encodes a <form>
elements –
<input>
<input type="checkbox">
– includes only checked elements<input type="radio">
– includes only the checked element<select>
– includes only the selected element<textarea>
Note all disabled
Inputs are ignored. Some corner cases like <input type="file">
and <select multiple>
have not been taken into account –
function formData(f) {
return Object.fromEntries(
Array.from(f.elements)
.filter(item => {
switch (item.type) {
case "checkbox": return item.checked
default: return !item.disabled
}
})
.map(item => [item.name, item.value])
)
}
console.log(formData(document.forms.foo))
<form id="foo">
<p>hello world</p>
<input name="a" value="A" />
<input name="b" value="B" disabled />
<textarea name="c" value="C">Ctext</textarea>
<select name="e">
<option value="E1">E1</option>
<option value="E2" selected>E2</option>
</select>
<input type="checkbox" name="f1" value="F1" checked />
<input type="checkbox" name="f2" value="F2" />
<input type="radio" name="g" value="G1" />
<input type="radio" name="g" value="G2" />
<input type="radio" name="g" value="G3" checked />
</form>
{
"a": "A",
"c": "Ctext",
"e": "E2",
"f1": "F1",
"g": "G3"
}
If I understand your question properly, what you need to use is the map
function of an array. This w3schools tutorial explains pretty much how to apply this in your case: https://www.w3schools.com/jsref/jsref_map.asp
1
Not the answer you’re looking for? Browse other questions tagged javascript or ask your own question.
lang-js