Gravity Forms non-empty Total field values not submitted [closed]

by

As @richardW8k pointed out, Total field values are recalculated on submission and will override anything submitted from the frontend.

If your custom jQuery code can be replaced by a formula in the Number field, that’d definitely the way to go. If your jQuery code is doing some more complex logic a calculated Number field will have the same issue as the total field. The submitted value will be overridden by the calculated value on submission.

Here’s a solution that allows you to use your custom jQuery code to update the value of a read-only Number field styled to look like the Total field.

  1. Add a Number field to your form.

  2. Mark the field as read-only. There are two ways to do this.

    The Easy Way
    GF Read Only provides the ability to mark fields as readonly right from the field settings.

    The Hard Way
    This snippet from Gravity Forms can do the job.

    // update '1' to the ID of your form
add_filter( 'gform_pre_render_1', 'add_readonly_script' );
function add_readonly_script( $form ) {
    ?>

    <script type="text/javascript">
        jQuery(document).ready(function(){
            /* apply only to a input with a class of gf_readonly */
            jQuery("li.gf_readonly input").attr("readonly","readonly");
        });
    </script>

    <?php
    return $form;
}

  3. Target this Number field with your jQuery code to update the price.

  4. Use our styles to style your Number field like a total field by adding a “gf_total” class to the field’s CSS Class Name setting.

    /**
 * Gravity Wiz // Gravity Forms // Style Number Fields like Total Field
 *
 * Use "gf_price" and "gf_total" CSS classes via the "CSS Class Name" setting to style your Number fields like a product
 * price (red) or total (green).
 */
.gform_wrapper .gf_price input[type=text],
.gform_wrapper .gf_price input[type=number] {
    border: 0;
    font-size: 1.2em;
    color: #060;
    text-indent: 0;
    padding: 0;
}
.gform_wrapper .gf_total input[type=text],
.gform_wrapper .gf_total input[type=number] {
    color: #060;
}