Populate a field with another field value in gravity forms

Question

I currently have a simple gravity form on my Wordpress website that includes a radio button field with 3 options: (Single, Married, Exempt).

I am wanting to dynamically populate a separate hidden text field on the same form with the value "Exempt" if the user selects the option Exempt in the radio button field. If the user selects one of the other options (Single or Married), I would like the value in the text field to be NULL.

Has anyone done something similar to this before, and if so, could you assist me with the steps to accomplish this?

Answer 1

You would need to add the code to a custom JavaScript file. You can read up on enqueuing JavaScript files here. In your comment you only provide one ID for the radio inputs, but each input should have it's own unique ID. So assuming your only radio inputs on this form are those 3 inputs, you could also target by type(as I have done below). If you want to share the HTML of your form I can tailor the answer more to your specific scenario.

// Document ready function for Wordpress
jQuery(function($) {
  $('form#25 input[type="radio"]').change(function(){
    if (this.value === 'exempt') {
      $('input#26').val(this.value);
    } else {
      $('input#26').val(null);
    }
  })
});

label {
  display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="25">
  <label>Single<input type="radio" name="marriage-status" value="single" /></label>
  <label>Married<input type="radio" name="marriage-status" value="married" /></label>
  <label>Exempt<input type="radio" name="marriage-status" value="exempt" /></label>
  <!-- HIDDEN INPUT -->
  <input id="26" type="text" />
</form>

It looks like your form only has radio inputs for "Filing Status," so you can do it like this:

// Document ready function for Wordpress
jQuery(function($) {
  $('form#gform_25 input[type="radio"]').change(function(){
    if (this.value === 'Exempt') {
      $('input#input_25_24_valid').val(this.value);
    } else {
      $('input#input_25_24_valid').val(null);
    }
  })
});

ul {
  padding-left:0;
}
li {
  list-style-type:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="gform_25">
  <li id="field_25_9" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible">
     <label class="gfield_label">Filing Status<span class="gfield_required">*</span></label>
     <div class="ginput_container ginput_container_radio">
        <ul class="gfield_radio" id="input_25_9">
           <li class="gchoice_25_9_0"><input name="input_9" type="radio" value="Single or Married filing sperately" id="choice_25_9_0"><label for="choice_25_9_0" id="label_25_9_0">Single or Married filing sperately</label></li>
           <li class="gchoice_25_9_1"><input name="input_9" type="radio" value="Married filing jointly" id="choice_25_9_1"><label for="choice_25_9_1" id="label_25_9_1">Married filing jointly (or Qualifying widow(er))</label></li>
           <li class="gchoice_25_9_2"><input name="input_9" type="radio" value="Head of household" id="choice_25_9_2"><label for="choice_25_9_2" id="label_25_9_2">Head of household (Check only if you're unmarried and pay more than half the costs of keeping up a home for yourself and a qualifying individual.)</label></li>
           <li class="gchoice_25_9_3"><input name="input_9" type="radio" value="Exempt" id="choice_25_9_3"><label for="choice_25_9_3" id="label_25_9_3">Exempt</label></li>
        </ul>
     </div>
  </li>
  
  <!-- Your hidden input -->
  <input type="text" class="gform_hidden" name="input_25_24_valid" id="input_25_24_valid">
</form>