Show Radio Button answer in HTML field later in form

ro

rokagraphics 07 Jul, 2019

Hi all,

I have a radio button (name of radio button is "strata_community_or_torrens_title), this radio button has three answers:
902.38=Strata Corporation Title
861.60=Community Corporation Title
793.62=Torrens Title

Later in my form I then have a HTML field where I want to show the answer from the radio button mentioned above in the format:
"Cost for your Form 1 will be ${data:strata_community_or_torrens_title}"

However, this does not work and all I get is "Cost for your Form 1 will be $"

Can anyone give me some help?

Thanks
Brad

Gr

GreyHead 07 Jul, 2019

Hi Brad,

There are no values from form elements in {data} until the form is submitted. You can show this value using a line of JavaScript that is called when the a radio button is selected.

Bob

ro

rokagraphics 07 Jul, 2019

Hi Bob,

Thanks for your reply. That makes sense now that you point it out.

As I'm a total newbie with JavaScript, is there any way you could help me out with JS required? I'd be happy to 'buy you a coffee' for your help 🙂

Many thanks
Brad

Max_admin 09 Jul, 2019

Answer

In a JavaScript action in the Load event you will need a code like this:

$('[name="radio5"]').on("change", function(){
    $("#text1").val($('[name="radio5"]:checked').val());
});

The coed above will print the radio value inside a text field with id text1

Best regards

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.

ro

rokagraphics 09 Jul, 2019

Hi Max,

Thanks for that.

I have a couple of questions so please excuse my ignorance.
For reference I'm using ChronoForms 6 and Joomla 3.9.8

I've got it working so that it shows the checked radio option in a text field, but what I really need is for it to show at the end of a sentence within a Custom HTML field.

ie. "Cost for your Form 1 will be $#text1"

Is there some way I can do this?

Many thanks
Brad

he

healyhatman 09 Jul, 2019

 $("#text1").val("Cost for your Form 1 will be $" + $('[name="radio5"]:checked').val());

ro

rokagraphics 09 Jul, 2019

Thanks for that healyhatman.

That will make it read how I need it, but it still means that the only way to show/display it is via a text field. The text field means the user can edit it, which is a bit clunky considering all I want to do is print the result in plain old HTML, something like this:

<h3>Cost for your Form 1 application will be $ #text1</h3>

I think what I need is for the JavaScript to provide a "value" that I can then call again and insert later in my form, but not via text field.

I appreciate your help though, thanks.

he

healyhatman 09 Jul, 2019

well then instead of setting the val() of a text field set the html() of a <span>

ro

rokagraphics 09 Jul, 2019

Perfect, thanks healyhatman.

Just for the record, this is what I've used:

$('[name="radio"]').on("change", function(){
    $("#text1").html("Cost for your Form 1 application will be $" + $('[name="radio"]:checked').val());
});

And then in my html:

<h3 id="text1">Cost for your Form 1 application will be $TBC</h3>

Works perfectly.

Thank you