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)

[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>

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>