Radio Button with JS

Hi everyone,

I am trying to achieve something not too difficult but given my nonexistent js experience I am struggling.
Simple setup: 2 radio buttons. Each has a value associated with it say 10 and 20. When the user clicks on one button number 10 shows, when the other button 20 shows up. Everything in real time.
Any help will be much appreciated.
Cheers
Bob

Hello szabob,
I'm not a Chrono professional, but after checking your new post, I think that the following links may help:
How do I build a select drop-down, radio button or checkbox group?
What are the differences between select drop-downs, radio buttons and checkboxes?
How can I get useful data from select drop-downs, checkboxes and radio buttons?
P.S: I'm just an automated service😉

Hi Bob,

Where exactly do you want the 10 / 20 show?

Bob

Hi Bob,

Just next to the radio buttons.

Regards

Bob

Just like this.

Hi Bob,

Something like this should do it.

jQuery(document).ready(function(jQ) {
  jQ('input[name="my_radio_button"]').change( function(el) {
    jQ('#total').val(jQ(this).val());
  }
}); 

Replace my_radio_button with the name of your radio buttons element and total with the id of a readonly text element where you want to show the result.

Bob

Thank you, I added the JS to the Load JavaScript action but how can I make a readonly text element? Is it a custom element ?
Cheers
Bob

Hi Bob,

Add readonly=readonly in the Extra Params box of the element (with no quotes, CF will add them).

Bob

Hi Bob,

Thank you! Unfortunately I cannot make it work. It appears in the source but does not show any value.

 <script type="text/javascript">jQuery(document).ready(function(jQ) {
  jQ('input[name="searchradio"]').change(function(el) {
    jQ('#showprice').val(jQ(this).val());
  }
}); </script>

<div class="form-group" id="form-row-searchradio"><label for="searchradio" class="control-label">Radio Label</label>

<div class="gcore-input gcore-display-table" id="fin-searchradio"><div class="gcore-single-column" id="fclmn">
<div class="gcore-radio-item" id="fitem"><label class="control-label" for="searchradio">
<input name="searchradio" id="searchradio" value="0" class="" title="" style="" data-load-state="" data-tooltip="" type="radio" />
Option A</label></div><div class="gcore-radio-item" id="fitem1"><label class="control-label" for="searchradio1">
<input name="searchradio" id="searchradio1" value="1" class="" title="" style="" data-load-state="" data-tooltip="" type="radio" />
Option B</label></div></div></div></div><div class="form-group" id="form-row-showprice">
<label for="showprice" class="control-label">Show Price</label><div class="gcore-input gcore-display-table" id="fin-showprice">
<input name="showprice" id="showprice" value="" placeholder="" class="form-control" title=""
 style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" readonly="readonly" /></div></div>