send value of form to hidden field of gravity form

Question

I have made a custom form which contains checkbox of item. If users check the checkbox then the total amount is shown and also a gravity form for name, email, address and message. I want to receive an email if users fill up the custom form and gravity form which contains the item that are checked with the sum total and the form fill in the section of gravity form. No problem in gravity form. I can receive email of the section of gravity form but I want to know which item are check and the total sum also in same email which is send by gravity form

Heres the custom form that i have made

Is there anyway to parse value of my custom made form to hidden field of gravity form? If there's it will be much better to send mail from gravity form to me. I have all my files in my localhost so cannot have link to site but there a fiddle you can view form.

The Js i have used in it is

var inputs = document.getElementsByClassName('immer'),
        total  = document.getElementById('immer-total');

 for (var i=0; i < inputs.length; i++) {
        inputs[i].onchange = function() {
            var add = this.value * (this.checked ? 1 : -1);
            total.innerHTML = parseFloat(total.innerHTML) + add
        }
    }

 var dazuinputs = document.getElementsByClassName('dazu'),
        totalDazu  = document.getElementById('dazu-total');
 for (var i=0; i < dazuinputs.length; i++) {
        dazuinputs[i].onchange = function() {
            var add = this.value * (this.checked ? 1 : -1);
            totalDazu.innerHTML = parseFloat(totalDazu.innerHTML) + add
        }
    }       

I need to get the value of total item which is checked and the sum Html for hidden field is

<input name="input_6" id="input_1_6" type="hidden" class="gform_hidden" aria-invalid="false" value="template-calculator">

If there's a way to get value of #immer-total to hidden field name input_6 while users click on submit button.

After some research I got a js

   var counter = 0;
  $('.gform_button').click(function(event){
   event.preventDefault();
    counter++;

     ...
   $('#immer-total').attr('input_3', counter);
   }

but didn't got the result.

Answer 1

jQuery can really help you here. Instead of count the inputs every time someone click on them - just count them when you need:

counter = $('input:checkbox:checked').length

Then you can set that number to the value of your hidden field:

$('#input_1_6').val(counter)

It's better to do so when the form is submitted:

$(function() {
    $('#frm1').submit(function() {
        counter = $('input:checkbox:checked').length;
        alert('Total number of checked checkboxes: '+counter);
        $('#input_1_6').val(counter);
    });
});

Note - the link you provided doesn't have the <form> tag and not the hidden input field.

Here is a working example based on your code:

 $(function() { $('#frm1').submit(function() { counter = $('input:checkbox:checked').length; alert('Total number of checked checkboxes: '+counter); $('#input_1_6').val(counter); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="frm1" action="" method="post"> <section id="template-calculator-wrap"> <div class="calculator-margin"> <h1>Paket-Konfigurator für Ihren Hotel oder Restaurant Webauftritt</h1> <div class="red-bar"></div> <h2>We create a unique process for each client to ensure that business objectives are met, success is achieved and users are happy.</h2> <div class="calculator-total-wrap"> <div class="row"> <div class="col-md-6 col-sm-6 col-xs-6 calc-total1"> <h1><span>CHF</span> 4'850.-</h1> <h3>Erstellung einmalig</h3> </div> <div class="col-md-6 col-sm-6 col-xs-6 calc-total2"> <h1><span>CHF</span> 2'975.-</h1> <h3>Unterhalt jährlich</h3> </div> </div> </div> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="price-col-title-wrap"> <h4>Immer enthalten</h4> <h3><span>CHF</span> <span id="immer-total">0</span>.-</h3> <input type="checkbox" id="c1" class="immer" value="50" name="cc" onclick="return false" checked=""> <label for="c1"><span> </span> Installation Wordpress</label> <br> <input type="checkbox" id="c2" class="immer" value="50" name="cc"> <label for="c2"><span> </span> Basis SEO und Dynamic Sitemap</label> <br> <input type="checkbox" id="c3" class="immer" value="50" name="cc"> <label for="c3"><span> </span> Adresse, Öffungszeiten, Telefon mit Call-Funktion für mobil</label> <br> <input type="checkbox" id="c4" class="immer" value="50" name="cc"> <label for="c4"><span> </span> Seite für Datenschutz und Impressum</label> <br> <input type="checkbox" id="c5" class="immer" value="50" name="cc"> <label for="c5"><span> </span> Social Media Follow (FB, G+, Twitter)</label> <br> <input type="checkbox" id="c6" class="immer" value="50" name="cc"> <label for="c6"><span> </span> Kontaktformular + Google Map API</label> <br> </div> <div class="price-col-title-wrap"> <h4>Dazu Module für Funktionalität</h4> <h3><span>CHF</span> <span id="dazu-total">0</span>.-</h3> <input value="50" class="dazu" type="checkbox" id="d1" name="cc"> <label for="d1"><span> </span> Installation Wordpress</label> <br> <input value="50" class="dazu" type="checkbox" id="d2" name="cc"> <label for="d2"><span> </span> Basis SEO und Dynamic Sitemap</label> <br> <input value="50" class="dazu" type="checkbox" id="d3" name="cc"> <label for="d3"><span> </span> Adresse, Öffungszeiten, Telefon mit Call-Funktion für mobil</label> <br> <input value="50" class="dazu" type="checkbox" id="d4" name="cc"> <label for="d4"><span> </span> Seite für Datenschutz und Impressum</label> <br> <input value="50" class="dazu" type="checkbox" id="d5" name="cc"> <label for="d5"><span> </span> Social Media Follow (FB, G+, Twitter)</label> <br> <input class="dazu" type="checkbox" id="c6" name="cc"> <label for="c6"><span> </span> Kontaktformular + Google Map API</label> <br> <input class="dazu" type="checkbox" id="c1" name="cc"> <label for="c1"><span> </span> Installation Wordpress</label> <br> <input class="dazu" type="checkbox" id="c2" name="cc"> <label for="c2"><span> </span> Basis SEO und Dynamic Sitemap</label> <br> <input class="dazu" type="checkbox" id="c3" name="cc"> <label for="c3"><span> </span> Adresse, Öffungszeiten, Telefon mit Call-Funktion für mobil</label> <br> <input class="dazu" type="checkbox" id="c4" name="cc"> <label for="c4"><span> </span> Seite für Datenschutz und Impressum</label> <br> <input class="dazu" type="checkbox" id="c5" name="cc"> <label for="c5"><span> </span> Social Media Follow (FB, G+, Twitter)</label> <br> <input class="dazu" type="checkbox" id="c6" name="cc"> <label for="c6"><span> </span> Kontaktformular + Google Map API</label> <br> <input class="dazu" type="checkbox" id="c1" name="cc"> <label for="c1"><span> </span> Installation Wordpress</label> <br> <input class="dazu" type="checkbox" id="c2" name="cc"> <label for="c2"><span> </span> Basis SEO und Dynamic Sitemap</label> <br> <input class="dazu" type="checkbox" id="c3" name="cc"> <label for="c3"><span> </span> Adresse, Öffungszeiten, Telefon mit Call-Funktion für mobil</label> <br> <input class="dazu" type="checkbox" id="c4" name="cc"> <label for="c4"><span> </span> Seite für Datenschutz und Impressum</label> <br> <input class="dazu" type="checkbox" id="c6" name="cc"> <label for="c6"><span> </span> Kontaktformular + Google Map API</label> <br> </div> </div> <div class="col-md-6 col-sm-6"> <div class="price-col-title-wrap"> <h4>Immer enthalten</h4> <h3><span>CHF</span> 1'600.-</h3> <input type="checkbox" id="c1" name="cc"> <label for="c1"><span> </span> Installation Wordpress</label> <br> <input type="checkbox" id="c2" name="cc"> <label for="c2"><span> </span> Basis SEO und Dynamic Sitemap</label> <br> <input type="checkbox" id="c3" name="cc"> <label for="c3"><span> </span> Adresse, Öffungszeiten, Telefon mit Call-Funktion für mobil</label> <br> <input type="checkbox" id="c4" name="cc"> <label for="c4"><span> </span> Seite für Datenschutz und Impressum</label> <br> <input type="checkbox" id="c5" name="cc"> <label for="c5"><span> </span> Social Media Follow (FB, G+, Twitter)</label> <br> <input type="checkbox" id="c6" name="radio"> <label for="c6"><span> </span> Kontaktformular + Google Map API</label> <br> <label>Design-Anpassungen Paket </label><br> <input type="radio" id="R1" name="cc"> <label for="R1" class="radio-padding-right"><span> </span> 8 Stunden</label> <input type="radio" id="R2" name="cc"> <label for="R2"><span> </span> 12 Stunden</label> <br> </div> <div class="price-col-title-wrap"> <h4>Dazu Module für Content</h4> <h3><span>CHF</span> 1'600.-</h3> <label>Design-Anpassungen Paket </label><br> <div class="numbers-row"> <!-- <label for="name">French Hens</label> <br/> --> <div class="dec button">-</div> <input type="text" name="french-hens" id="french-hens" value="11"> <div class="inc button">+</div> </div> <input type="checkbox" id="c5" name="cc"> <label for="c5"><span> </span> Social Media Follow (FB, G+, Twitter)</label> <br> <label>Design-Anpassungen Paket </label><br> <input type="radio" id="R4" name="cc"> <label for="R4" class="radio-padding-right"><span> </span> 8 Stunden</label> <input type="radio" id="R5" name="cc"> <label for="R5" class="radio-padding-right"><span> </span> 12 Stunden</label> <input type="radio" id="R3" name="cc"> <label for="R3"><span> </span> 12 Stunden</label> <br> <label>Design-Anpassungen Paket </label><br> <input type="radio" id="R4" name="cc"> <label for="R4" class="radio-padding-right"><span> </span> 8 Stunden</label> <input type="radio" id="R5" name="cc"> <label for="R5" class="radio-padding-right"><span> </span> 12 Stunden</label> <input type="radio" id="R3" name="cc"> <label for="R3"><span> </span> 12 Stunden</label> <br> <label>Design-Anpassungen Paket </label><br> <input type="radio" id="R4" name="cc"> <label for="R4" class="radio-padding-right"><span> </span> 8 Stunden</label> <input type="radio" id="R5" name="cc"> <label for="R5" class="radio-padding-right"><span> </span> 12 Stunden</label> <input type="radio" id="R3" name="cc"> <label for="R3"><span> </span> 12 Stunden</label> <br> </div> </div> </div> <!-- gravity form here --> </div> <!-- end calculator-margin div --> </section> <input name="input_6" id="input_1_6" type="hidden" class="gform_hidden" aria-invalid="false" value="template-calculator"> <input type="submit" name="submit" value="submit" /> </form> 

Answer 2

Hi there I don't know if I understand question correctly ... but as I understand you want to count checkbox checked and send that in email ... If it's your question then solution is here...

https://gist.github.com/spivurno/a14ef4a18f57d0c67811e1b4d8791781

It simple function you have to write and make hidden filed to get total checked ...after that you you can use that filed in Confirmation setting ...as merge tag to get email notification as you need.

Configuration just change value as need at bottom of code

new GW_Checkbox_Count( array(
    'form_id'            => 123, // the ID of your form
    'count_field_id'     => 2, // any Number field on your form in which the number of checked checkboxes should be dynamically populated; you can configure conditional logic based on the value of this field.
    'checkbox_field_ids' => array( 5, 8 ) // any array of Checkbox field IDs which should be counted
) );

ADD this to your function

<?php
/**
 * Gravity Wiz // Gravity Forms // Checkbox Count
 *
 * Get the total number of checkboxes checked. Useful when wanting to apply conditional logic based on the number of
 * checkboxes checked.
 *
 * @version   2.4
 * @author    David Smith <david@gravitywiz.com>
 * @license   GPL-2.0+
 * @link      http://gravitywiz.com/...
 * @copyright 2018 Gravity Wiz
 */
class GW_Checkbox_Count {

    private static $is_script_output;

    function __construct( $args ) {

        $this->_args = wp_parse_args( $args, array(
            'form_id'            => false,
            'count_field_id'     => false,
            'checkbox_field_id'  => null,
            'checkbox_field_ids' => false
        ) );

        if( isset( $this->_args['checkbox_field_id'] ) ) {
            $this->_args['checkbox_field_ids'] = array( $this->_args['checkbox_field_id'] );
        }

        add_filter( 'gform_pre_render',            array( $this, 'load_form_script' ), 10, 2 );
        add_action( 'gform_register_init_scripts', array( $this, 'add_init_script' ) );
        //add_action( 'gform_pre_validation',        array( $this, 'override_submitted_value') );

    }

    public function load_form_script( $form, $is_ajax_enabled ) {

        if( $this->is_applicable_form( $form ) && ! has_action( 'wp_footer', array( $this, 'output_script' ) ) ) {
            add_action( 'wp_footer', array( $this, 'output_script' ) );
            add_action( 'gform_preview_footer', array( $this, 'output_script' ) );
        }

        return $form;
    }

    function output_script() {
        ?>

        <script type="text/javascript">

            ( function( $ ) {

                window.GWCheckboxCount = function( args ) {

                    var self = this;

                    // copy all args to current object: formId, fieldId
                    for( prop in args ) {
                        if( args.hasOwnProperty( prop ) )
                            self[prop] = args[prop];
                    }

                    self.init = function() {

                        for( var i = 0; i < self.checkboxFieldIds.length; i++ ) {

                            var checkboxFieldId = self.checkboxFieldIds[ i ],
                                checkboxField   = $( '#input_' + self.formId + '_' + checkboxFieldId );

                            checkboxField.find( 'input[type="checkbox"]' ).click( function() {
                                self.updateCheckboxCount( self.formId, self.checkboxFieldIds, self.countFieldId );
                            } );

                        }

                        self.updateCheckboxCount( self.formId, self.checkboxFieldIds, self.countFieldId );

                    };

                    self.updateCheckboxCount = function( formId, checkboxFieldIds, countFieldId ) {

                        var countField    = $( '#input_' + formId + '_' + countFieldId ),
                            count         = 0;

                        for( var i = 0; i < checkboxFieldIds.length; i++ ) {

                            var checkboxField = $( '#input_' + formId + '_' + checkboxFieldIds[ i ] );

                            count += checkboxField.find( 'input[type="checkbox"]' ).filter(':checked').length;

                        }

                        if( parseInt( countField.val() ) != parseInt( count ) ) {
                            countField.val( count ).change();
                        }

                    };

                    self.init();

                }

            } )( jQuery );

        </script>

        <?php
        self::$is_script_output = true;
    }

    function add_init_script( $form ) {

        if( ! $this->is_applicable_form( $form['id'] ) )
            return;

        $args = array(
            'formId'           => $this->_args['form_id'],
            'countFieldId'     => $this->_args['count_field_id'],
            'checkboxFieldIds' => $this->_args['checkbox_field_ids']
        );

        $script = 'new GWCheckboxCount( ' . json_encode( $args ) . ' );';
        $slug = implode( '_', array( 'gw_checkbox_count', $this->_args['form_id'], $this->_args['count_field_id'] ) );

        GFFormDisplay::add_init_script( $this->_args['form_id'], $slug, GFFormDisplay::ON_PAGE_RENDER, $script );

        return;
    }

    function override_submitted_value( $form ) {
        //$_POST["input_{$this->count_field_id}"] = $day_count;
        return $form;
    }

    public function is_applicable_form( $form ) {

        $form_id = isset( $form['id'] ) ? $form['id'] : $form;

        return empty( $this->_args['form_id'] ) || $form_id == $this->_args['form_id'];
    }

    public function is_ajax_submission( $form_id, $is_ajax_enabled ) {
        return isset( GFFormDisplay::$submission[ $form_id ] ) && $is_ajax_enabled;
    }

}

# Configuration

new GW_Checkbox_Count( array(
    'form_id'            => 123, // the ID of your form
    'count_field_id'     => 2, // any Number field on your form in which the number of checked checkboxes should be dynamically populated; you can configure conditional logic based on the value of this field.
    'checkbox_field_ids' => array( 5, 8 ) // any array of Checkbox field IDs which should be counted
) );