Populate field based on selected radio choice

I’m pretty sure I have the same question that was asked and left for dead in this thread:

I have a radio button field with 3 options:

  • 1 week
  • 2 weeks
  • 4 weeks

Under that, I have a text field that is set to be dynamically populated. I would love for that field to be dynamically populated by “today’s date” + the selected radio button.

I already know how to populate that field using the ‘gform_field_value’ filter, and I know how to do the date calculation. The only thing I don’t know how to do is have that field automatically update, “live in real-time” as the user selects one of the radio options.

Is this possible? (I’m not interested in Gravity Wiz or Gravity Perks or “Populate Anything”.)

Video explanation:

Gravity Forms Support - Update field based on selected radio - Watch Video

It’s possible with custom code or using the Populate Anything plugin from Gravity Wiz. You mentioned that you are not interested in Populate Anything, which means you will be left to create your own code. Updating the field live in real-time will require JavaScript or jQuery. I don’t have any example code to share since Populate Anything takes care of this for most everyone.

I will leave this open in the event someone has the code to share.

I managed to find the hook: gform_register_init_scripts

Could I use that? And if so, when I copy/paste the example snippet on this page to my functions.php file, it gives me a syntax error, “syntax error, unexpected ‘input’ (T_STRING)”.

add_action( 'gform_register_init_scripts', 'gform_format_money' );
function gform_format_money( $form ) {
    $script = '(function($){' .
        '$('.gf_money input').each(function(){' .
            '$(this).val(gformFormatMoney($(this).val()));' .
        '}).change(function(){' .
            '$(this).val(gformFormatMoney($(this).val()));' .
        '});' .
    GFFormDisplay::add_init_script( $form['id'], 'format_money', GFFormDisplay::ON_PAGE_RENDER, $script );

The error points to this line

'$('.gf_money input').each(function(){' .

My use case has nothing to do with transforming currencies so I still have a lot of work ahead of me, but if the syntax of the example is wrong then I have no hope. haha

Any suggestions?

I think that is probably overkill. It does not sound like the right approach. I will leave this open and hope that someone has an idea that can help.

Meaning, I don’t need to use that hook, and can just use “normal” JavaScript to access field data?



….with some extra computation to actually complete my problem statement.

Yes, exactly. You don’t need to use that hook. You need some JavaScript or jQuery on the page to access the field data. Using the gform_register_init_scripts is overkill. You can have the script you write in an HTML field you add to the form.

You can start with something like this:

  // do something

Excellent. Thanks for the confirmation. I’ll post my code back here once I get the solution.

1 Like

Thanks, David. Good luck.

So, the whole scope of my project was to first read the selected radio button value, which I could then use to calculate two different due dates. I managed to accomplish everything I needed with this snippet:

		var radio = document.querySelectorAll(".gfield_radio");	
		function checkBox(e){
			var entryDate = new Date();
			var shipDate = new Date();
			entryDate.setDate(entryDate.getDate() + parseInt(e.target.value));
			shipDate.setDate(shipDate.getDate() + parseInt(e.target.value) + 10);

			var dd = String(entryDate.getDate()).padStart(2, '0');
			var mm = String(entryDate.getMonth() + 1).padStart(2, '0'); // 0 is January, so we must add 1
			var yyyy = entryDate.getFullYear();

			var entryString = mm + "/" + dd + "/" + yyyy;

			var dds = String(shipDate.getDate()).padStart(2, '0');
			var mms = String(shipDate.getMonth() + 1).padStart(2, '0'); // 0 is January, so we must add 1
			var yyyys = shipDate.getFullYear();

			var dateString = mms + "/" + dds + "/" + yyyys; 

			input_2_21.value = String(entryString);
			input_2_22.value = String(dateString);


		radio.forEach(check => {
			check.addEventListener("click", checkBox);


Anyone reading this should know that I’ve avoided JavaScript coding my whole life so this is probably not the most efficient way to do it. If there’s a better way, I’m all eyes and ears.

To see the implementation, you can view it on this page. Scroll down to the “Collection Period” question and then notice how the due dates below get calculated and populated.

However, it’s just a staging site so at some point it will eventually disappear.

1 Like

Thank you for sharing that code!

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.