检查表单是不是脏并在动态删除之前通知用户
Posted
技术标签:
【中文标题】检查表单是不是脏并在动态删除之前通知用户【英文标题】：Check if a form is dirty and inform user before dynamically removing it检查表单是否脏并在动态删除之前通知用户 【发布时间】：2020-10-03 15:30:56 【问题描述】：我的页面有一个表单列表。当用户单击列表中的表单名称时，每个表单将由 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>如果用户在点击另一个表单之前忘记提交表单（如果表单脏了），我需要为他们添加提醒。它可以是一个弹出窗口，让用户选择继续（并构建下一个表单）或取消（返回当前未完成的表单）。
我曾尝试查看beforeunload 功能，但它仅在页面重新加载时才有效。在我的代码中，当一个表单很脏并且用户点击另一个表单时，我可以console.log('form is dirty');
我该如何配置？我正在使用jQuery Dirtyforms
【问题讨论】：
【参考方案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
【讨论】：
感谢您的回复。#main-part 是包裹在表单周围的 div。我试图定义自定义警报，但它仅在页面刷新时触发，并且警报是带有通用消息的浏览器本机警报。如何触发上面if (isDirty) 块内的对话框？
我已经更新了我的答案，你可以看看它是否适合你以上是关于检查表单是不是脏并在动态删除之前通知用户的主要内容，如果未能解决你的问题，请参考以下文章