我的应用程序中具有设计为带有引导程序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？
谢谢。
答案 0 :(得分：5)
我将使用一种形式，如果用户仅在一个选项卡上更新数据，则会将该选项卡的输入字段的值发送到服务器。
这是一个基于示例的基本示例，使用sweetalert2。
source_a = SourceA.objects.first()
source_b = SourceB.objects.first()
MyModel.objects.create(source=source_a)
MyModel.objects.create(source=source_b)
$(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;
};
});