How to change properties of all input fields in a custom form

Ask the community
,
1

I have a custom form with 20+ input fields. I would like to change the properties on each one without having to specify the field names. Is there a way to do this? Here’s a pseudocode:

var inputFields = an array/collection of all fields in the form.
for each inputField in inputFields
inputField.sytyle.backgroundcolor = red
end

I suspect the solution would also be applicable to all the radio objects, checkboxes, and dropdown boxes.

2 
let inputFields = ["#inpField1", "#inpField2", "#inpField3"];

for each inputField in inputFields
	$w(inputField).sytyle.backgroundcolor = red;
end
3

Thank you.

This solution would require that I know the fieldnames.

I’m looking for a method to just searches the form for all text input form elements and then cycle through them. This will eliminate the need to keep updating the inputFields array as elements are added and removed.

4

Below is my solution based on my unique form which contained multiple input element types. All of my form elements are on a Strip Object (#columnStrip1). I ran the following code to obtain the strip’s children:

let myChildren = $w("#columnStrip1").children;
console.log(myChildren)

This returned:

Array(1)jsonTableCopy JSON
0: "$w('#column24')"

I then modified the initial code to:

let myChildren = $w("#column24").children;
console.log(myChildren)

This returned 80 values

Array(80)jsonTableCopy JSON
0: "$w('#memberID')"
1: "$w('#btnLoadInfo')"
2: "$w('#button20')"
3: "$w('#firstName')"
4: "$w('#middleName')"
5: "$w('#lastName')"
6: "$w('#addressStreet')"
7: "$w('#addressCity')"
8: "$w('#input115')"
9: "$w('#addressZipCode')"
10: "$w('#input113')"
11: "$w('#input112')"
12: "$w('#input111')"
13: "$w('#input110')"
...

I finally ran the following code to access all the field names, test if they are of type $w.TextInput, and changed the style properties.


$w.onReady(function () {
var borderColor = "black";
var backgroundColor = "#B8861B"; // Old Gold
var borderRadius="10px";
var borderWidth = "2px";
changeTextInputProperties(backgroundColor,borderColor,borderRadius,borderWidth);
});

function changeTextInputProperties(backgroundColor,borderColor,borderRadius,borderWidth) {
  let myChildren = $w("#column24").children;
  for ( var i=0;i<myChildren.length;i++){
    if (myChildren[i].type =="$w.TextInput") {
      myChildren[i].style.backgroundColor = backgroundColor; 
      myChildren[i].style.borderColor = borderColor;
      myChildren[i].style.borderRadius = borderRadius;
      myChildren[i].style.borderWidth = borderWidth;
    }}
  }

One can see how other element types can be addressed. Other types included in my form are: $w.Button, $w.CheckboxGroup, $w.RadioButtonGroup, $w.UploadButton