如何在用户移动到下一个选项卡之前显示确认模式

Question

我的应用程序中有一节是用bootstrap 4选项卡设计的。共有六个选项卡，其中五个选项卡包含带有输入字段的表单。原始代码是同时提交所有数据(6个选项卡中的所有5个(。对我来说，这是不必要的，因为用户可能只在一个选项卡上更改数据。为了提高这个代码的效率，我希望有一个适当的逻辑，可以防止用户丢失数据，同时给他们一个选项，在他们离开选项卡之前保存数据。以下是我的代码示例：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="card">
<div class="card-header">
<h4>Main Menu</h4>
<ul class="nav nav-tabs card-header-tabs" id="agency_tabs" role="tablist">
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab_1">Section 1</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_2">Section 2</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_3">Section 3</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_4">Section 4</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_5">Section 5</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_6">Section 6</a></li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div id="tab_1" class="tab-pane active">
<div class="form-row">
<div class="form-group col-6">
<label class="font-weight-bold" for="fname">First Name:</label>
<input class="form-control" type="text" name="fname" id="fname" value="" maxlength="30" placeholder="Please enter first name.">
</div>
<div class="form-group col-6">
<label class="font-weight-bold" for="lname">Last Name:</label>
<input class="form-control" type="text" name="lname" id="lname" value="" maxlength="30" placeholder="Please enter last name.">
</div>
</div>
<div class="row">
<div class="col-12 text-center m-3">
<button type="button" name="save" class="btn btn-secondary save-data">Save</button>
<button type="button" name="cancel" class="btn btn-secondary cancel">Cancel</button>
</div>
</div>
</div>
<div id="tab_2" class="container tab-pane fade">
<div class="form-group">
<label class="font-weight-bold" for="phone">Phone Number:</label>
<input class="form-control" type="text" name="phone" id="phone" value="" pattern="d{3}-d{3}-d{4}" data-dispfld="The required format is: 000-000-0000" maxlength="12">
</div>
<div class="row">
<div class="col-12 text-center m-3">
<button type="button" name="save" class="btn btn-secondary save-data">Save</button>
<button type="button" name="cancel" class="btn btn-secondary cancel">Cancel</button>
</div>
</div>
</div>
<div id="tab_3" class="container tab-pane fade">
<div class="form-group">
<label class="font-weight-bold" for="email">Email:</label>
<input class="form-control" type="email" name="email" id="email" value="" maxlength="40" required>
<small class="form-text text-muted">This Email Address is used for login to your account.</small>
</div>
<div class="row">
<div class="col-12 text-center m-3">
<button type="button" name="save" class="btn btn-secondary save-data">Save</button>
<button type="button" name="cancel" class="btn btn-secondary cancel">Cancel</button>
</div>
</div>
</div>
<div id="tab_4" class="container tab-pane fade">
<div class="form-group">
<label class="font-weight-bold" for="title">Business Title:</label>
<select class="custom-select browser-default" name="title" id="title" required>
<option value="">--Select Title--</option>
<option value="1">Manager</option>
<option value="2">Secretary</option>
<option value="3">Tester</option>
</select>
</div>
<div class="row">
<div class="col-12 text-center m-3">
<button type="button" name="save" class="btn btn-secondary save-data">Save</button>
<button type="button" name="cancel" class="btn btn-secondary cancel">Cancel</button>
</div>
</div>
</div>
<div id="tab_5" class="container tab-pane fade">
<div class="form-group">
<label class="font-weight-bold" for="cname">Company Name:</label>
<input class="form-control" type="text" name="cname" id="cname" value="" maxlength="120" placeholder="Please enter Company." required>
</div>
<div class="row">
<div class="col-12 text-center m-3">
<button type="button" name="save" class="btn btn-secondary save-data">Save</button>
<button type="button" name="cancel" class="btn btn-secondary cancel">Cancel</button>
</div>
</div>
</div>
<div id="tab_6" class="container tab-pane fade">
This tab will display some general information. No input fields.
</div>
</div>
</div>
</div>
</div>

我想知道的第一件事是，每个选项卡部分都应该是单独的表单，还是所有选项卡都应该有一个表单？

第二，如果用户在选项卡2中输入数据，然后单击选项卡4，此时我是否应该显示警报，他们会收到类似"切换到其他选项卡之前是否要保存数据？"的消息，然后有两个按钮"是"或"继续"。如果他们点击"是"，数据应该保存，如果不只是打开下一个选项卡。

有没有一种方法可以通过JQuery和Bootstrap 4实现这一点？

谢谢。

Answer 1

我会使用一个表单，如果用户只更新一个选项卡上的数据，我会将该选项卡的输入字段的值发送到服务器。

下面是一个基于您使用sweetalert2的代码的基本示例。

$(function() {
$('#agency_tabs a[data-toggle="tab"]').click(function(e) {
e.preventDefault();

if (!$(this).hasClass('active') && isValid($('#agency_tabs a[data-toggle="tab"].active').data('group'))) {
Swal.fire({
title: 'Are you sure?',
text: 'Do you want to save your data before you switch to different tab?',
type: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes',
cancelButtonText: 'Continue'
}).then(confirm => {
if (confirm.value) {
/* Save data here */
$(this).tab('show');
}
});
}

return false;
});

$('.save-data').click(function(e) {
e.preventDefault();

if (isValid($(this).data('group'))) {
// Save data here
}
});

const isValid = group => {
let valid = true;

$('[data-group="' + group + '"]:not(button):not(a)').each(function(index, item) {
$(this).removeClass('is-invalid');
if (!this.checkValidity()) {
$(this).addClass('is-invalid');
valid = false;
}
});

return valid;
};
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
<div class="container-fluid">
<div class="card">
<div class="card-header">
<h4>Main Menu</h4>
<ul class="nav nav-tabs card-header-tabs" id="agency_tabs" role="tablist">
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab_1" data-group="section-1">Section 1</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_2" data-group="section-2">Section 2</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_3">Section 3</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_4">Section 4</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_5">Section 5</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_6">Section 6</a></li>
</ul>
</div>
<div class="card-body">
<form action="#" method="post" novalidate>
<div class="tab-content">
<div id="tab_1" class="tab-pane active">
<div class="form-row">
<div class="form-group col-6">
<label class="font-weight-bold" for="fname">First Name:</label>
<input class="form-control" type="text" name="fname" id="fname" value="" maxlength="30" placeholder="Please enter first name." data-group="section-1" required>
</div>
<div class="form-group col-6">
<label class="font-weight-bold" for="lname">Last Name:</label>
<input class="form-control" type="text" name="lname" id="lname" value="" maxlength="30" placeholder="Please enter last name." data-group="section-1" required>
</div>
</div>
<div class="row">
<div class="col-12 text-center m-3">
<button type="button" name="save" class="btn btn-secondary save-data" data-group="section-1">Save</button>
<button type="button" name="cancel" class="btn btn-secondary cancel">Cancel</button>
</div>
</div>
</div>
<div id="tab_2" class="container tab-pane fade">
<div class="form-group">
<label class="font-weight-bold" for="phone">Phone Number:</label>
<input class="form-control" type="text" name="phone" id="phone" value="" pattern="d{3}-d{3}-d{4}" data-dispfld="The required format is: 000-000-0000" maxlength="12" data-group="section-2" required>
</div>
<div class="row">
<div class="col-12 text-center m-3">
<button type="button" name="save" class="btn btn-secondary save-data" data-group="section-2">Save</button>
<button type="button" name="cancel" class="btn btn-secondary cancel">Cancel</button>
</div>
</div>
</div>
<div id="tab_3" class="container tab-pane fade">
<div class="form-group">
<label class="font-weight-bold" for="email">Email:</label>
<input class="form-control" type="email" name="email" id="email" value="" maxlength="40" data-group="section-3" required>
<small class="form-text text-muted">This Email Address is used for login to your account.</small>
</div>
<div class="row">
<div class="col-12 text-center m-3">
<button type="button" name="save" class="btn btn-secondary save-data" data-group="section-3">Save</button>
<button type="button" name="cancel" class="btn btn-secondary cancel">Cancel</button>
</div>
</div>
</div>
<div id="tab_4" class="container tab-pane fade">
<div class="form-group">
<label class="font-weight-bold" for="title">Business Title:</label>
<select class="custom-select browser-default" name="title" id="title" data-group="section-4">
<option value="">--Select Title--</option>
<option value="1">Manager</option>
<option value="2">Secretary</option>
<option value="3">Tester</option>
</select>
</div>
<div class="row">
<div class="col-12 text-center m-3">
<button type="button" name="save" class="btn btn-secondary save-data" data-group="section-4">Save</button>
<button type="button" name="cancel" class="btn btn-secondary cancel">Cancel</button>
</div>
</div>
</div>
<div id="tab_5" class="container tab-pane fade">
<div class="form-group">
<label class="font-weight-bold" for="cname">Company Name:</label>
<input class="form-control" type="text" name="cname" id="cname" value="" maxlength="120" placeholder="Please enter Company." data-group="section-5" required>
</div>
<div class="row">
<div class="col-12 text-center m-3">
<button type="button" name="save" class="btn btn-secondary save-data" data-group="section-5">Save</button>
<button type="button" name="cancel" class="btn btn-secondary cancel">Cancel</button>
</div>
</div>
</div>
<div id="tab_6" class="container tab-pane fade">
This tab will display some general information. No input fields.
</div>
</div>
</form>
</div>
</div>
</div>