Use Javascript to set value of radio button field with onchange for field

[DesiLogi]

Hello,

I have a field that normally would be a cascading radio button whose value is dependent on the selection of another field's dropdown value (the parent). However, I need the user to be able to over-ride the cascaded value occasionally. You can't do this normally so I'm trying to use js to do it. 

There is a  text field set to Dropdown, called 'SalesCode.'

A Virtual field (Virtual 18) is set to Cascading Text Field so it can receive a value when 'SalesCode' (the parent) is updated. 

The text field called 'Taxable' is the one I need to update. It's set to a Radio Button with 2 custom choices ('tax' or 'non'). 

The code I think I need is 'on change' for the SalesCode drop down field. Meaning when the user updates the SalesCode value, it updates Virtual18 (cascaded) and then the code takes the value of Virtual18 and puts in in the Taxable field's Radio Button value (the value in Virtual18 will always be either 'tax' or 'non' so it corresponds with the custom choices in Taxable). If the user wants to override that Taxable value they can change the radio button choice. 

The code below is something like I think I need but I can't get it to work, any help would be really great! 

<script>

$("#InsertRecordSalesCode").change(function(){

var v_tax = document.getElementsByName("cbParamVirtual18")[0].value;

document.getElementsByName("InsertRecordTaxable")[0].value = v_tax;

});

</script>

 

[DesiLogi]

I figured out the solution, if anyone needs it. An EventListener makes it work: 

<script type="text/javascript">

document.addEventListener('DataPageReady', function (event) {
 
  var x = document.querySelector('[name*=cbParamVirtual18]');
 
  x.onchange = function() {

var v_virtc = document.getElementsByName("cbParamVirtual18")[0].value;

document.getElementsByName("InsertRecordTaxable")[0].value = v_virtc;

}
});

</script>

 

[Kurumi]

Hi - Just an update regarding Radio Buttons. Caspio will be introducing a new DOM structure of the radio button in DataPages. If you are using custom scripts to access the DOM structure of radio button groups, you should revise them to use the element “ID” or “name” or "type=radio" attribute instead. 

For more information, you can check it here: https://howto.caspio.com/release-notes/caspio-34-0/impacted-areas-34-0/

[DesiLogi]

Hi @Meekeee,

This wouldn't change the code I've posted for this particular function, would it, as it's using 'getElementsByName' for the radio button? 

[Kurumi]

Hi @DesiLogi - there will be no change in your code 

[DesiLogi]

Hi @Meekeee,

Thanks for letting me know--some things are just a bit beyond my skillset so far.