Gravity Forms disabled inputs that submit correctly

If you looked for how to make a Gravity Forms field disabled/read-only you probably found the official article from their documentation. They suggest using a piece of JavaScript added to the “gform_pre_render” action, it looks like this:

add_filter('gform_pre_render_1', 'add_readonly_script');
function add_readonly_script($form){
    ?>

    <script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery("li.gf_readonly input").attr("readonly","readonly");
        });
    </script>

    <?php
    return $form;
}

That suggestion is good if you work with simple text inputs ( or swapping that input to textarea ) but for select/drop-down it’s a bit more complicated, especially the ones that use the Chosen JavaScript library.

Including all form elements

I wanted to include all form elements so I used the “:input” jQuery selector which includes all form elements.

Next I wanted to also disable select elements that use the Chosen library – so I added trigger, so the call looks like this:

jQuery(function($){
    jQuery('.mgf_disabled :input').prop('disabled', true).trigger("chosen:updated");
});

The looks

You probably noticed I made the fields disabled instead of “read-only” and that’s because by default the browsers don’t display the fields differently when they are marked as “read-only”, and I didn’t want to add any custom css. You can just skip this part and use read-only if you add some styles to that using the :read-only selector:

input:-moz-read-only { /* For Firefox */
    background-color: yellow;
}

input:read-only {
    background-color: yellow;
}

If you decide to use disabled – you probably know that those fields get ignored when submitting the form so the solution is to remove that attribute on the submit action. The final code looks like this:

jQuery(function($){
    jQuery('.mgf_disabled :input').prop('disabled', true).trigger("chosen:updated");
    jQuery('.gform_wrapper form').submit(function() {
        jQuery('.mgf_disabled :input').prop('disabled', false);
    });
});