Displaying different Free Text fields based on a calculation result

The Conditional fields feature available in RSForm!Pro only works with fields that have predefined values: checkbox groups, radio and dropdowns, but it does not work directly with textboxes or hidden fields. To display or hide fields based on the value of a calculated result (like a total), you’ll need to use custom JavaScript.

This guide walks you through showing specific Free Text fields based on a calculated total from dropdowns. We will need the followings:

The Calculation Fields

1. Create 4 dropdown fields, let's name them simply dropdown1, dropdown2, dropdown3 and dropdown4. Each dropdown should contain the following items that will later be used with RSForm!Pro Calculations feature:

• |Select
• 1[p1]
• 2[p2]
• 3[p3]
• 4[p4]

2. Create 4 Free Text fields, let's name them simply freetext-1, freetext-2, freetext-3 and freetext-4. Each Free Text field should contain the specific content you want shown based on the calculated total.

3. Create a Textbox field that will be used as the Total field in our calculation (we'll name it simply 'total') which will hold the calculated sum of the dropdown selections.

<style>
  .rsform-block-total {
     display:none;
    }
  .rsform-type-freetext {
     font-size: 35px;
    }
</style>

The Calculation Equation

Go to Form Properties > Calculations tab and create a new Calculation, like the one below, which will automatically update the total field as dropdowns are selected:

  total = {dropdown1:value}+ {dropdown2:value}+ {dropdown3:value}+ {dropdown4:value}

The JavaScript Code

Now, using JavaScript, we will show one of the above Free Text fields based on the Total result. Go to Form Properties > JavaScript area and add the following code:

<script>
$(document).ready(function() {
  function updatefreetexts() {
    var total = parseFloat($('#total').val());

    // Hide all freetext blocks
    $('.rsform-block-freetext-1, .rsform-block-freetext-2, .rsform-block-freetext-3, .rsform-block-freetext-4').hide();

    // Show based on total value
    if ([4.00, 5.00].includes(total)) {
      $('.rsform-block-freetext-1').show();
    } else if ([6.00, 7.00].includes(total)) {
      $('.rsform-block-freetext-2').show();
    } else if ([8.00, 9.00].includes(total)) {
      $('.rsform-block-freetext-3').show();
    } else if (total >= 10.00) {
      $('.rsform-block-freetext-4').show();
    }
  }

  // Attach change event to all relevant dropdowns
  $('#dropdown1, #dropdown2, #dropdown3, #dropdown4').on('change', function() {
    setTimeout(updatefreetexts, 500);
  });

  // Also run when total changes
  $('#total').on('change', updatefreetexts);

  // Initial execution
  updatefreetexts();
});
</script>

Make sure to change all the field names according to your real field names in order for the code to work.