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

Question

I have created a gravity form and used several Total fields. Although I do not have any Product fields in my form, which the Total field is usually used to display the total of product prices, I used the Total field because I like the way it automatically formats prices and I am setting the values of the Total fields in my form via my own jQuery code. My code updates both the text in the Total field span element and the associated hidden input element.

However, despite these values displaying in the Total fields on the form, when the form is submitted the Total fields' values are not displaying in the form entries or email notifications.

I know my use of the Total field is not strictly in keeping with the intended usage, but I do not know why the field values are missing from the submission entries. Any ideas why and if there is a way to get around the problem?

Answer 1

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;
   }