Javascript events example

This is an advanced example, intended for developers who have an understanding of JavaScript DOM manipulation and events.

Console (Will update as you make changes to the form below)

Form

    First step

    group is visible!
    Text:
    Second step

    This is step 2

    Third step

    This is step 3


    Form Code

    [step title "First step"]
    [checkbox c use_label_element "Show group"]
    [group g1]group is visible![/group]
    [repeater r]
    Text: [text t1]
    [/repeater]
    [step title "Second step"]
    <p>This is step 2</p>
    [step title "Third step"]
    <p>This is step 3 </p>

    Conditional Fields (Text)

    show [g1] if [c] equals "Show group"

    Example JS code

    <script>
    
    // ON SHOW GROUP
    jQuery('form').on('wpcf7cf_show_group', function(e) {
      var group = e.target.getAttribute('data-id');
      jQuery('#console').append('show group '+group+'<br>');
    });
    
    // ON HIDE GROUP
    jQuery('form').on('wpcf7cf_hide_group', function(e) {
      var group = e.target.getAttribute('data-id');
      jQuery('#console').append('hide group '+group+'<br>');
    });
    
    // ON ADD REPEATER
    jQuery('form').on('wpcf7cf_repeater_added', function(e) {
      var sub_rep = e.target.getAttribute('data-repeater_sub_suffix');
      var rep = e.target.parentElement.getAttribute('data-id');
      jQuery('#console').append('added repeater ' + sub_rep + ' to parent ' + rep  + '<br>');
    });
    
    // ON REMOVE REPEATER
    jQuery('form').on('wpcf7cf_repeater_removed', function(e) {
      console.log(e.target);
      var rep = e.target.getAttribute('data-id');
      jQuery('#console').append('removed repeater from parent '+rep+'<br>');
    });
    
    // ON CHANGE STEP
    jQuery('form').on('wpcf7cf_change_step', function(e, previousStep, currentStep) {
      var step_title = e.target.getAttribute('data-title');
      jQuery('#console').append('moved from step '+previousStep+ ' to '+currentStep+'. Current step title: '+step_title+' <br>');
    });
    
    </script>