changing the value of a radio button when dropdown value is selected

[Buggy]

hi im trying to change value of a radiobutton when a change the value o a dropdown using the following script. can anybody help here please ?

<script>
if (document.dataPageReadyHanlder == undefined) {
  const dataPageReadyHanlder = () => {
    const radioButton = document.querySelector("[id*='EditRecordMW_Watch_Work_Work_Status']");
    const dropdowns = document.querySelectorAll('input[name="EditRecordMW_Watch_Work_Work_Progress"]');
    if(radioButton == null) return;

    for (const dropdown of dropdowns) {
      dropdown.addEventListener('change', (e) => {
        console.log(e.target.value);
        if (e.target.value == 'Done') {
          radioButton.value = 'Complete';
        } else {
          radioButton.value = 'Active';
        }
      });
    }
  };

  document.addEventListener('DataPageReady', dataPageReadyHanlder);
  document.dataPageReadyHanlder = dataPageReadyHanlder;
}
</script>

[CoopperBackpack]

Hello @Buggy,
Do you have a DataPage like this?



Please test this code:

<script>
if (document.DataPageReadyHandler == undefined) {

     const DataPageReadyHandler = (e) => {
          if (e.detail.appKey != '[@cbAppKey]') { return }
    
         const dropdown = document.querySelector('#EditRecordMW_Watch_Work_Work_Progress');
         const radioButtonComplete = document.querySelector('input[id*="EditRecordMW_Watch_Work_Work_Status"][value="Complete"]');
         const radioButtonActive = document.querySelector('input[id*="EditRecordMW_Watch_Work_Work_Status"][value="Active"]');
     
         dropdown.addEventListener('change', (e) => {
            if (e.target.value == 'Done') {
                radioButtonComplete.checked  = 'checked';
            } else {
                radioButtonActive.checked  = 'checked';
            }
         })
    }
    document.addEventListener('DataPageReady', DataPageReadyHandler)
    document.DataPageReadyHandler = 'Enabled'
}
</script>

If it doesn`t work as expected, please provide more details about the workflow.

What is the value selected in the Radio Button when the DataPage is opened? 
 

[Buggy]

ok still not working. the value when opened is 'Started' and RadioButton has 3 choices and Active is checked

When value is changed to 'Done' i want RadioButton 'Complete' to be checked so when page is updated these are written to table.

[Buggy]

what is this bit doing in your code - if (e.detail.appKey != '[@cbAppKey]') { return }

 

[CoopperBackpack]

Hello @Buggy,

That line of code is to check if the script runs on this particular DataPage. It checked the DataPage AppKey.

I assume that the Dropdown can be the Cascading Dropdown. If so, the element should be referenced in a slightly different way:
 

<script>
if (document.DataPageReadyHandler == undefined) {

     const DataPageReadyHandler = (e) => {
          if (e.detail.appKey != '[@cbAppKey]') { return }
    
         const dropdown = document.querySelector('select[id*="EditRecordMW_Watch_Work_Work_Progress"]');
         const radioButtonComplete = document.querySelector('input[id*="EditRecordMW_Watch_Work_Work_Status"][value="Complete"]');
         const radioButtonActive = document.querySelector('input[id*="EditRecordMW_Watch_Work_Work_Status"][value="Active"]');
     
         dropdown.addEventListener('change', (e) => {
            if (e.target.value == 'Done') {
                radioButtonComplete.checked  = 'checked';
            } else {
                radioButtonActive.checked  = 'checked';
            }
         })
    }
    document.addEventListener('DataPageReady', DataPageReadyHandler)
    document.DataPageReadyHandler = 'Enabled'
}
</script>

  Please test this version of the code. 

[Buggy]

hi is that the same code as above ?

[CoopperBackpack]

@Buggy,

One line of code was updated.

In the previous version

const dropdown = document.querySelector('#EditRecordMW_Watch_Work_Work_Progress');

In the updated version

const dropdown = document.querySelector('select[id*="EditRecordMW_Watch_Work_Work_Progress"]');

 

BTW, if you have Triggered Actions in your account, this can be done by a Trigger. I mean that the value of one field can be assigned based on a condition (for example, when another field is changed).

[Buggy]

ok the trigger will only work after the page is submitted ? im trying to update the page on the fly and normalyy i manage this with my limited knowledge of js but struggling here, its still not working?

[Buggy]

im still trying to implement this code but i cannot get the result i hoped for can anybody help further with this ?

[CoopperBackpack]

Hello @Buggy,
If the Trigger is not an option for you, of course you can use JS.

I tested the code I provided and it works on my side for the same scenario.

Do you see any errors in the browser console after the code is added? (to check the console you need to click F12)

[Buggy]

hi what am i looking for in the console please ? i can see

Uncaught SyntaxError: Unexpected token '{'
    at addScriptElem (<anonymous>:5:6358)
    at Array.forEach (<anonymous>)
    at f_tabularRSViewObj.parseResponse (<anonymous>:5:5822)
    at ajaxObj.callBack (<anonymous>:20:5572)
    at xmlhttp.onreadystatechange (<anonymous>:10:2190)

[Buggy]

i figured it was using another value in the dropdown for the value.

[Buggy]

i have this code which is great but when the page loads because its using cascading dropdown - radioButtonActive.checked  = 'checked';   gets set everytime on the esle statement and i want it only if the user has changed the value here - mconst dropdown = document.querySelector('select[id*="EditRecordMW_Watch_Work_Work_Progress"]');

<script>
if (document.DataPageReadyHandler == undefined) {

     const DataPageReadyHandler = (e) => {
          if (e.detail.appKey != '[@cbAppKey]') { return }
    
         const dropdown = document.querySelector('select[id*="EditRecordMW_Watch_Work_Work_Progress"]');
         const radioButtonComplete = document.querySelector('input[id*="EditRecordMW_Watch_Work_Work_Status"][value="Complete"]');
         const radioButtonActive = document.querySelector('input[id*="EditRecordMW_Watch_Work_Work_Status"][value="Active"]');
     
         dropdown.addEventListener('change', (e) => {
            if (e.target.value == '2'|| e.target.value == '12' || e.target.value == '21' || e.target.value == '113' || e.target.value == '116') {
                radioButtonComplete.checked  = 'checked';
            } else {
                radioButtonActive.checked  = 'checked';
            }
         })
    }
    document.addEventListener('DataPageReady', DataPageReadyHandler)
    document.DataPageReadyHandler = 'Enabled'
}
</script>