title: Check if a form is dirty and inform user before dynamically removing it
body: <p>My page has a list of forms. Each form will be dynamically built by D3 when the user clicks on the form name in the list. Below is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
    // display corresponding form for each click
    d3.selectAll(".form-name").on("click", function() {
      // check if the current form is dirty first
      var isDirty = $(document.querySelector('#main-part form')).dirtyForms('isDirty');
  
      if (isDirty) {
        console.log('form is dirty');
       
       // display confirmation dialog
        
  
      } else {
        console.log('form is NOT dirty');
        buildForm(d3.select(this).attr('id'));
      }
    })
  });
  
  function buildForm(id) {
    var formId = "form_" + id;
    var myform = d3.select("#main-part")
      .select("form")
      .attr("id", formId);
  
    myform.selectAll("*").remove();
    myform.append("span").text("Feedback for " + formId);
    // Appending up and down vote radio button
    var radio_groups = myform
      .append('div')
      .attr('class', 'form-group');
  
    // Radio for upvote
    var radio_grp_chk = radio_groups
      .append('div')
      .attr('class', 'form-check form-check-inline upvote');
    radio_grp_chk
      .append('input')
      .attr('class', 'form-check-input')
      .attr('type', 'radio')
      .attr('name', 'voting-radio')
      .attr('value', 'thumbup')
      .attr('required', '');
    radio_grp_chk.append('span').text('Up');
  
    // Radio for downvote
    var radio_grp_chk2 = radio_groups
      .append('div')
      .attr('class', 'form-check form-check-inline downvote');
    radio_grp_chk2
      .append('input')
      .attr('class', 'form-check-input')
      .attr('type', 'radio')
      .attr('name', 'voting-radio')
      .attr('value', 'thumbdown')
      .attr('required', '');
    radio_grp_chk2.append('span').text('Down');
  
    // Appending feedback text area
    var text_group = myform.append('div').attr('class', 'form-group');
    text_group
      .append('label')
      .attr('for', 'feedback-txt')
      .text('Feedback');
  
    text_group
      .append('textarea')
      .attr('class', 'form-control feedback-text')
      .attr('id', 'feedback-text')
      .attr('placeholder', 'Enter...');
  
    // Submit button
    myform.append('button')
      .attr('type', 'submit')
      .attr('class', 'btn btn-primary rating-btn')
      .attr('id', 'submit-form')
      .text('Submit');
  
    // Initialize dirty form
    $("#" + formId).dirtyForms({
      dialog: {
        title: 'Wait!'
      },
      message: 'You forgot to save your details. If you leave now, they will be lost forever.'
    });
  
    // Bind click event on button
    myform.select("#submit-form").on("click", function() {
      d3.event.preventDefault();
      // validate all forms:
      var form = $('#main-part form')[0];
      var valid = form.checkValidity();
      form.reportValidity();
  
      if (valid) {
        // Perform submission
        console.log("Form submitted!");
  
        // set form status back to clean
        $("#" + formId).dirtyForms('setClean');
      }
    });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;head&gt;
    &lt;!-- bootstrap --&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" crossorigin="anonymous"&gt;
  &lt;/head&gt;
  
  &lt;body style="padding:3%;"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
        &lt;div id="form-list" class="col-3"&gt;
          &lt;div class="table-responsive"&gt;
            &lt;table class="table table-striped table-hover table-fit"&gt;
              &lt;thead class='thead-dark'&gt;
                &lt;tr&gt;
                  &lt;th&gt;Form&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                &lt;tr class="form-name" id="A"&gt;
                  &lt;td&gt;Form A&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr class="form-name" id="B"&gt;
                  &lt;td&gt;Form B&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr class="form-name" id="C"&gt;
                  &lt;td&gt;Form C&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
  
        &lt;div id="main-part" class="col-9"&gt;
          &lt;form&gt;
  
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;script src="https://d3js.org/d3.v5.min.js"&gt;&lt;/script&gt;
    &lt;!-- jQuery --&gt;
    &lt;script src="https://code.jquery.com/jquery-3.5.0.min.js" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="//cdn.jsdelivr.net/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I need to add a reminder for the user if they forget to submit the form (if the form is dirty) before they click on another form. It can be a popup to let the user choose either to continue (and build the next form) or cancel (return to the current incomplete form).</p>
  
  <p>I have tried to look at the <code>beforeunload</code> feature but it works only when the page is reloaded. In my code, when a form is dirty and user clicks another form, I can <code>console.log('form is dirty');</code></p>
  
  <p>How do I configure this? I'm using <a href="https://github.com/snikch/jquery.dirtyforms#usage" rel="nofollow noreferrer">jQuery Dirtyforms</a></p>