检查表单是否脏并在动态删除之前通知用户

Question

我的页面有一个表单列表。当用户单击列表中的表单名称时，D3 将动态构建每个表单。下面是代码：

$(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');
    }
  });
}

<!DOCTYPE html>

<head>
  <!-- bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" crossorigin="anonymous">
</head>

<body style="padding:3%;">
  <div class="container-fluid">
    <div class="row">
      <div id="form-list" class="col-3">
        <div class="table-responsive">
          <table class="table table-striped table-hover table-fit">
            <thead class='thead-dark'>
              <tr>
                <th>Form</th>
              </tr>
            </thead>
            <tbody>
              <tr class="form-name" id="A">
                <td>Form A</td>
              </tr>
              <tr class="form-name" id="B">
                <td>Form B</td>
              </tr>
              <tr class="form-name" id="C">
                <td>Form C</td>
              </tr>
            </tbody>
          </table>
        </div>

      </div>

      <div id="main-part" class="col-9">
        <form>

        </form>
      </div>
    </div>
  </div>


  <script src="https://d3js.org/d3.v5.min.js"></script>
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.0.min.js" crossorigin="anonymous"></script>
  <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js"></script>
</body>

如果用户在单击另一个表单之前忘记提交表单（如果表单是脏的），我需要为用户添加一个提醒。它可以是一个弹出窗口，让用户选择继续（并构建下一个表单）或取消（return 到当前未完成的表单）。

我试图查看 beforeunload 功能，但它仅在重新加载页面时有效。在我的代码中，当一个表单变脏并且用户单击另一个表单时，我可以 console.log('form is dirty');

我该如何配置？我正在使用 jQuery Dirtyforms

Answer 1

试试这个

 var isDirty = $("form").dirtyForms('isDirty');


if (isDirty) {
  console.log('form is dirty');
   result = window.confirm('You forgot to save your details. If you leave now, they will be lost forever.');
   if(result){
     //implement logic
     $('form').dirtyForms('setClean');
     buildForm(d3.select(this).attr('id'));
   }
   if(!result){
     return
   }
} 
//...rest of code

检查表单是否脏并在动态删除之前通知用户

Check if a form is dirty and inform user before dynamically removing it

html

javascript

jquery

jquery-dirtyforms