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”.)
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)”.
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
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:
<script>
gform.initializeOnLoaded(function(){
jQuery('input[name="name_of_your_radiobutton"]:checked').val();
// do something
});
</script>
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:
<script>
gform.initializeOnLoaded(function(){
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);
});
});
</script>
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.
