var form = document.getElementById("myform").elements;
for(var i = 0; i < form.length; i++){
if(form[i].type == 'text'){
console.log(form[i].name + ": " + form[i].value);
}
}
If so how?
In one project I have 55 checkboxes on one page, and I'd like to do a check all.
In a different part of the site I have ~15 select boxes and I'd like to count all the ones which have values.
In yet a different page I want to have a 'Reset All' which resets all 70+ form inputs to the initial state.
Let me try this again.
I have two different pages (more, but that's fine).
On one page, I have maybe 55 checkboxes.
On another page I have maybe 15 select boxes/dropdowns.
I would like to loop over all 55 checkboxes to change from checked to not checked and vise versa. Maybe I can use what you've posted.
However, I also want to count all select boxes which have a value.
To extend this a bit further, I also have a number of regular input text boxes and I want to count which ones have content too.
Plus, I still want a one button to reset all values on two pages, not just the checkboxes.
yeah like the link I posted, you can currently loop through all the checkbox options and either get or set them. if you want to count them, you do a forEach with a conditional and an accumulator variable.
You should be able to iterate over all of the options using Object.keys/values functions to perform the additional logic you require.
A drawback here is that it doesn't seem like the form or it's data carry type objects for each component, but if you adhere to a strict naming scheme you can build that into the JS query to filter for only things like checkboxes or select/text inputs with content .
Okay please let me rephrase.
I want to loop through all of input elements regardless of the input type.
With a checkbox, as you have stated, this is not too difficult to do.
However, I have more than checkboxes.
In your last post, you are only changing/inspecting the value of a single element and not you are not doing that in a loop.
Do you know how I can do the following in Retool:
function getUserValue (){
let allInputs = get All Inputs from more than one form/page/tab/container
for each input in allInputs{
if input.type = checkbox {
if input.value = true {
add input.name to array
}
} else if input.type = input text {
if input.value != null {
do something different with input.value
}
} else if input.type = select box {
if input.value > 0 {
do something with select box value
}
}
}
return something
}
I have 50+ checkboxes on one page/tab in a different area I have 15+ select boxes and in another area I have 20+ input boxes.
So if I can loop through all the inputs then I have something that is robust and limits the amount of typos and IFs.
From what I can tell I need to do something like:
if checkbox1.value {
do check operation
}
if checkbox2.value {
do check operation
}
...
if checkbox49.value {
do check operation
}
if checkbox50.value {
do check operation
}
if selectbox1.value > 0 {
do select operation
}
if selectbox2.value > 0 {
do select operation
}
...
if selectbox14.value > 0 {
do select operation
}
if selectbox15.value > 0 {
do select operation
}
if inputbox1.value != null {
do input operation
}
if inputbox2.value != null {
do input operation
}
...
if inputbox19.value != null {
do input operation
}
if inputbox20.value != null {
do input operation
}
That's a total of 85 different IF statements, which is far too many when in regular JavaScript you can get all the inputs, loop through them while doing your testing. The more code you have, the more likely you are to have a typo or an error, the longer it take a human to read and it's probably not as efficient as it could be to execute by the computer.
Here's a snippet that you can use to start parsing out types and removing fields. It is more generalized so you can join as much form/page/component data as you'd like. Selects return as an "undefined" type when they aren't filled in, but when they are they are treated as string types. Multiselects would be arrays so YMMV with those:
For my clunky little form this gave me results that you should be able to start using without needing to write an if statement for every component you find:
ETA:
Components DO have a pluginType property which could help here so long as you are able to dynamically grab a component by name (which I don't think is possible currently).
For example, if you've got the name of the component through Object.keys you might be able to do something that calls upon the component directly:
getComponentById[key].pluginType
But the whole getComponentById thing is just something I've made up to illustrate how it would need to be referenced.
