Javascript to convert radio button selection to numeric var

Get Help
1

I’m hoping someone out there can help me over a little hurdle. I have a form with essentially 3 fields:

  1. guests (number)
  2. hours (number)
  3. refreshments (yes/no radio button)

The goal of the form is to return a multiplication product based on these three fields (e.g. result = guests * hours * refreshments [where refreshments is either 1 or 1.2 depending on the user’s selection])

My problem is that I don’t understand how to use JS in GF to convert a response on the radio button to a numeric value.

Any assist would be greatly appreciated.

2

I managed to solve my own problem by assigning numeric values to each of the radio button choices (radio button field --> General tab --> show values).

I probably didn’t know what to Google, but I found it difficult to locate many practical examples of Javascript code for use in GF. For what it’s worth I’m copying my code here for anyone that might search for something similar in the future…

(plopped this code into an HTML field just prior to Field 6 in my form that displayed the calculated value)

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>

<script type="text/javascript">
<!--
jQuery( document ).ready(function($) {

	gform.addFilter('gform_calculation_result', function( result, formulaField, formId, calcObj ) {
    if ( formId == '2' && formulaField.field_id == '6' ) {
        var guests = calcObj.replaceFieldTags( formId, '{:1}', formulaField ),
            hours = calcObj.replaceFieldTags( formId, '{:2}', formulaField ),
            bevs = calcObj.replaceFieldTags( formId, '{:3}', formulaField );
        result = guests * hours * bevs;
    document.getElementById("demo1").innerHTML = guests;
    document.getElementById("demo2").innerHTML = hours;
    document.getElementById("demo3").innerHTML = bevs;
    document.getElementById("demo4").innerHTML = result;
    }
    return result;
} );
} );
-->
</script>

Also, probably worth noting that I have very little programming experience, so for all the seasoned programmers out there… sorry if my code is a little rudimentary.

1 Like
3

I believe the built in calculations in Gravity Forms can do this without the need for your JavaScript.

The first thing is to assign values to the radio button options as you have done. Be sure that each value is unique, or you will have problems recording the proper answers.

Then, you can add a number fields, and enable the calculation with the checkbox. Then this would be your calculation:

{:1:value} * {:2:value} * {:3:value}

Would that work for you without the need for your own JavaScript?

1 Like
4

Thank you Chris! Generally yes, but I oversimplified the Javascript segment I shared. The final Javascript involved was more complex and involved if/then and rounding formulas that the native GF calculation field wouldn’t permit. In my attempt at simplifying my question for the sake of clarity I managed to over-simplify my question and create confusion.

You’re right… based on the info I shared regarding my problem your solution would have worked. Unfortunately there was deeper math involved (not incorporated in the sample I shared) that exempted it from GF’s native calculation options.

I noticed in another post that someone had suggested as a feature improvement that GF incorporate functions (like rounding) into their calculation fields. If any GF staff is watching these threads… I’d up-vote that suggestion.

1 Like
5

Sounds like you have it handled. Thank you for the additional information.