Set other fields to Null after one field is changed

[NeoInJS]

Hi - I have 4 Virtual fields  in my submission form and ALL virtual fields have Dropdown form elements. When I select a value in one virtual field, I would like to set the other fields to have blank values. So my scenarios,

1. I chose a value(non-null) in cbParamVirtual1, the values in cbParamVirtual2, cbParamVirtual3, and cbParamVirtual4 would be blank or null.

2. I chose a value(non-null) in cbParamVirtual2, the values in cbParamVirtual1, cbParamVirtual3, and cbParamVirtual4 would be blank or null.

3. I chose a value(non-null) in cbParamVirtual3, the values in cbParamVirtual1, cbParamVirtual2, and cbParamVirtual4 would be blank or null.

4. I chose a value(non-null) in cbParamVirtual4, the values in cbParamVirtual1, cbParamVirtual2, and cbParamVirtual3 would be blank or null.

I hope that this would be a simple JavaScript that you can provide. Thank you for the help.

[carlJS]

Hi @NeoInJS,

 

You may try pasting the code snippet provided in an HTML Block.

(Note: Disable the HTML Editor from the Advanced tab, and move the HTML Block to the very bottom).

 

Note that we can add/remove items in the fields array. We can add DataSource fields as well. Just duplicate field lines as needed and put cbParamVirtualn, or the name of your DataSource field.

<script>
  var fields = [
    'cbParamVirtual1',
    'cbParamVirtual2',
    'cbParamVirtual3',
    'cbParamVirtual4',
  ];
  
  
  /*
   * 
   * Do not modify code from beyond this point
   */
  fields = fields.map( function(elem) {
    return document.querySelector('[action*="[@cbAppKey]"] [id*='+ elem + ']');
  });

 

  function changer(ev) {
    fields.forEach(function(field) {
      if (ev.target.value != '' && ev.target != field)
        field.value = '';
    });
  }

 

  fields.forEach(function(fff) {
    fff.addEventListener('change', changer);
  });
  
</script>

 

[src="carl.js"]