Clear out text field based on value list options

[Anonymous]

There are two fields as below:

1. Please choose Yes/No,

2. If Yes, please specify, (text box)

If i chose "Yes" for 1, 2 gets displayed. 

I want to clear out text box 2 if Yes is changed to No for 1.

[DavidPetty]

So then the .change() isn't firing which is typically a hit or miss with Archer.  How is the values list configured; values pop-up, radio button or dropdown?

[Anonymous]

Value list field is configured as Radio Button

[DavidPetty]

See if this works:

$('input[type=radio][name^="' + yesNoClientId + '"]').change(function() {
     console.log("Field has changed");
     const yesOrNo = $CM.getFieldValue(yesNoFieldId);
     if (yesOrNo !== null && yesOrNo[0] === no + ':0') {
          console.log("Clearing Text Field");
          setTextField(textFieldId, '');
     }
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[Anonymous]

Not working David

[DavidPetty]

Saumya, the code I posted above worked for me.  Though I changed the ^ to *

$('input[type=radio][name*="' + yesNoClientId + '"]').change(function() {
     console.log("Field has changed");
     const yesOrNo = $CM.getFieldValue(yesNoFieldId);
     if (yesOrNo !== null && yesOrNo[0] === no + ':0') {
          console.log("Clearing Text Field");
          setTextField(textFieldId, '');
     }
});‍‍‍‍‍‍‍‍

If that still doesn't work.  I suggest that you put some more console.log("text"); in your custom object, along the code path and see where the code stops.

[Fsantana]

Hi David/Geoff,

Regarding this awesome co. How can I blank out a numeric value field using a three-button VL field?

Looking forward to talking to all during the summit.

Frank

[GeoffTaylor2]

Hi Frank,

Try this:

<script>
  const numericFieldId = 21578;
  const vlFieldId = 21579;
  // If the values list field contains any of the values in the array below, set the numeric field to blank.
  // The values are specified by ID. Append ':0' to each value ID so that we can write simpler code to do the comparison.
  const clearFieldOnValues = ['73764:0', '73765:0'];

  function setNumericField(fld, val) {
    // A numeric field's <input> element has 'minValue' and 'maxValue' attributes.
    // Get the existing attribute values so they can be reused when setting the numeric field's value.
    const attrs = Sys.Serialization.JavaScriptSerializer.deserialize($('input[id$="'+ fld +'c_ClientState"]').val());
    const minVal = attrs.minValue;
    const maxVal = attrs.maxValue;

    let numericFieldAttributes = new Array();

    numericFieldAttributes.push({
      enabled: true,
      emptyMessage: '',
      validationText: val,
      valueAsString: val,
      minValue: minVal,
      maxValue: maxVal,
      lastSetTextBoxValue: val
    });

    const numericFieldAttributesSerialised = Sys.Serialization.JavaScriptSerializer.serialize(numericFieldAttributes[0]);

    $('input[id$="'+ fld +'c"]').val(val);
    $('input[id$="'+ fld +'c_ClientState"]').val(numericFieldAttributesSerialised);
  }

  Sys.Application.add_load(function() {
    const vlClientId = $CM.getFieldById(vlFieldId).clientId;
    const radioButtons = $('input[id^="' + vlClientId + '"]');

    /* The handler must be attached to each radio button's change event,
    so iterate over the radioButtons object and attach the handler to the
    change event of each <input> element. */
    for (let key in radioButtons) { 
      if (radioButtons[key] instanceof HTMLInputElement) {
        let rbId = radioButtons[key].id;
        $('input#' + rbId).change(function() {
          let selectedValue = $CM.getFieldValue(vlFieldId);

          if (selectedValue !== null && clearFieldOnValues.indexOf(selectedValue[0]) !== -1) {
            setNumericField(numericFieldId, '');
          }  
        });
      }
    }
  });
</script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[AndresBedollaG]

Hi Geoff Taylor‌, this works great for me! Thanks. 

What if I have two of these on the same application? How would I make it work for the same scenario but for other fields on the same form?

[GeoffTaylor2]

This will handle situations where you have multiple values lists and multiple text fields. The objects in the fields array associate a VL field with one or more text fields. If the VL field contains any of the values in clearOnValues, it will clear all of the associated textFields. (This only works if all VLs are drop down lists, but it could be adapted to radio buttons using the code elsewhere in this thread.)

<script>
  /* An array of objects. Each object contains:
     vlField: The ID of the values list field.
     textFields: The IDs of the text fields to be cleared by vlField.
                 If there's only one text field, it should be an array of one item.
     clearOnValues: An array of value IDs with ':0' appended to each ID.
                    If the values list field contains any of these values,
                    the text field will be cleared.
                    If there's only one value, it should be an array of one item.
  */
  const fields = [
    {vlField: 21580, textFields: [21581], clearOnValues: ['73768:0']}, // One VL clears one text field
    {vlField: 21582, textFields: [21583, 21584], clearOnValues: ['73770:0', '73772:0']} // One VL clears multiple text fields 
  ];

  function setTextField(fld,val) {
    let textFieldAttributes = new Array();

    textFieldAttributes.push({
        enabled: true,
        emptyMessage: '',
        validationText: val,
        valueAsString: val,
        lastSetTextBoxValue: val});

    const textFieldAttributesSerialised = Sys.Serialization.JavaScriptSerializer.serialize(textFieldAttributes[0]);

    $('input[id$="'+ fld +'c"]').val(val);
    $('input[id$="'+ fld +'c_ClientState"]').val(textFieldAttributesSerialised);
  }

  Sys.Application.add_load(function() {
    // Iterate over the fields and attach the handler to each VL field's change event
    fields.forEach(function(fld) {
      let vlClientId = $CM.getFieldById(fld.vlField).clientId;

      $('div[id^="' + vlClientId + '"]').change(function() {
        let selectedValue = $CM.getFieldValue(fld.vlField);

        if (selectedValue !== null && fld.clearOnValues.indexOf(selectedValue[0]) !== -1) {
          // Iterate over the text fields and call setTextField for each one
          fld.textFields.forEach(function(textFld) {
            setTextField(textFld, '');
          });
        }
      });
    });
  });
</script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[AndresBedollaG]

Thank you very much! Works as expected!