Shows how to add a script that checks the Participants Database record edit form for unsaved changes

pdb-record-unsaved-warning.php

<?php
/**
 * custom template for the [pdb_record] shortcode that demonstrates showing a 
 * warning to a user if they have unsaved changes to the record
 */
?>
<script>
  jQuery(function($){
    // tracks the form for unsaved changes
    var unsaved = false;

    // Set the unsaved flag to true on change, keyup, or keydown events for inputs, textareas, and selects
    $('.pdb-record :input').on('change keyup keydown', function (e) {
        unsaved = true;
    });

    // When the form is submitted, reset the flag to prevent the warning
    $('.pdb-record form').submit(function () {
        unsaved = false;
    });

    // Attach to the 'beforeunload' event to check the flag
    $(window).on('beforeunload', function () {
        if (unsaved) {
            // Returning a string will prompt the user with a confirmation dialog
            // The exact message is controlled by the browser for security reasons
            return 'There are unsaved changes.';
        }
    });
  });
</script>


<div class="wrap <?php esc_attr_e( $this->wrap_class ) ?>">

  <?php
  /*
   * as of version 1.6 this template can handle the display when no record is found
   * 
   * 
   */
  if ( $this->record_found() ) :
    ?>

    <?php // output any validation errors
    $this->print_errors();
    ?>

    <?php
    // print the form header
    $this->print_form_head()
    ?>

    <?php while ( $this->have_groups() ) : $this->the_group(); ?>
      <?php $this->group->print_title() ?>
    <?php $this->group->print_description() ?>

      <table  class="form-table">

        <tbody class="field-group field-group-<?php esc_attr_e( $this->group->name ) ?>">

          <?php
          // step through the fields in the current group

          while ( $this->have_fields() ) : $this->the_field();
            ?>

            <tr class="<?php $this->field->print_element_class() ?>">

              <th for="<?php $this->field->print_element_id() ?>"><?php $this->field->print_label() ?></th>
              <td>

                <?php $this->field->print_element_with_id(); ?>

                <?php if ( $this->field->has_help_text() ) : ?>
                  <span class="helptext"><?php $this->field->print_help_text() ?></span>
      <?php endif ?>

              </td>

            </tr>

    <?php endwhile; // field loop  ?>

        </tbody>

      </table>

  <?php endwhile; // group loop  ?>
    <table class="form-table">

      <tbody class="field-group field-group-submit">

        <tr>
          <th><h3><?php $this->print_save_changes_label() ?></h3></th>
          <td class="submit-buttons">
  <?php $this->print_submit_button( 'button-primary' ); // you can specify a class for the button, second parameter sets button text  ?>
          </td>
        </tr>

      </tbody>

    </table><!-- end group -->

    <?php $this->print_form_close() ?>

  <?php else : ?>

    <?php $error_message = Participants_Db::plugin_setting( 'no_record_error_message', '' );

    if ( !empty( $error_message ) ) :
      ?>
      <p class="alert alert-error"><?php echo wp_kses_post( $error_message ) ?></p>

    <?php endif ?>

<?php endif ?>

</div>

Use this template by downloading it and then uploading the template to the Participants Database custom template location on your site. Usually, this will be wp_content/participants-database-templates

Use the template by adding the name to the shortcode like this: [pdb_record template="unsaved-warning"]

General instructions for using Participants Database custom shortcode templates is found here: Using Participants Database Custom Templates