我正在尝试创建分步表单。这个想法是，当用户完成第1步时，他们按下了下一个按钮，第2步出现，而第1步消失了。当他们再次单击下一步时，将出现步骤3，表单上的步骤2内容将消失，等等。
我基本上完成了我想做的事情。但是，我正在努力弄清楚如何隐藏步骤中所有内容，除了表单上的“上一步”，“下一步”按钮。这些按钮位于父容器内，我无法将它们移出，因为它们位于表单内，因此我需要捕获表单上的数据。
所以我有2个问题：
1）如何隐藏除“上一个”和“下一个”按钮之外的所有内容？
2）恐怕如果我确实使用.hide() jquery方法，将停止将表单数据发送到服务器吗？我在网上阅读，许多人说，如果将元素设置为display:hidden，则会阻止数据发送到服务器。另外，我不能使用visibility:hidden，因为表单上的布局是由动态数据填充的，并且高度可能与不删除页面上的布局的高度不同。
我有大量的代码，所以我只展示问题的相关部分：
JavaScript：
// Next, Previous Counter functionality
nextButton.addEventListener('click', function(){
if(emailInput == '' || nameInput == '' || selecttoolkitType.value == '' || selectRequestor.value == '') {
alert('Form Submission Error. Please fill in all fields');
} else {
// Counter for next functionality
// go to next step
nextCounter++;
if(nextCounter != 1){
previousButton.style.display = 'inline-block';
}
if(nextCounter == 2){
progressStatus.childNodes[3].classList.add('active');
//console.log($('.stepOne').not('.stepOne#nextButton'));
// This doesn't work.. it still hides everything contained within .stepOne parent container..
$('.stepOne').not('#previousButton', '#nextButton').hide().addClass('animated fadeOutDown');
// After step 1 goes away, show step two content.
$('.stepTwo').show().addClass('animated fadeInUp');
for(var obj in importedData) {
$('table#confirmData').find('tbody').append('<tr><td>' + Object.values(importedData[obj])[1] + '</td><td>' + Object.values(importedData[obj])[0] + '</td><td>' + selecttoolkitType.value + '</td><td>' + selectRequestor.value + '</td><td>' + moment().format('YYYY-MM-DD') + '</td></tr>');
}
}
if(nextCounter == 3){
progressStatus.childNodes[5].classList.add('active');
nextButton.style.display = 'none';
massSubmit.style.display = 'inline-block';
}
}
});
previousButton.addEventListener('click', function(){
// If user clicks previous go back to previous step
nextCounter--;
if(nextCounter != 3) {
massSubmit.style.display = 'none';
}
if(nextCounter == 1 || nextCounter == 2) {
nextButton.style.display = 'inline-block';
}
if(nextCounter == 1) {
progressStatus.childNodes[3].classList.remove('active');
previousButton.style.display = 'none';
}
if(nextCounter == 2) {
progressStatus.childNodes[5].classList.remove('active');
}
});
HTML
<div class="stepOne">
<div class="row">
<div class="col-md-12">
</div>
<div class="col-md-12">
<div class="upload-files">
<form
method="POST"
enctype="multipart/form-data"
id="js-upload-form">
<div class="form-inline">
<div class="form-group">
<input
type="file"
name="files[]"
id="js-upload-files"
multiple>
</div>
<button
type="submit"
class="btn btn-sm btn-primary"
id="js-upload-submit">
Upload file
</button>
</div>
</form>
</div>
<!-- Drop Zone -->
<div class="upload-drop-zone" id="drop-zone">
<i class="fas fa-upload"></i>
Or just drag and drop your file here
</div>
<!-- Progress Bar -->
<div class="progress" id="progressContainer">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" id="progressBar" aria-valuenow="0" aria-valuemax="100"></div>
</div>
<!-- Progress Status -->
<div class="progress-status">
<h3 id="progress-status"></h3>
<p id="loaded-total"></p>
</div>
<!-- Upload Finished -->
<div class="js-upload-finished" id="progressstatusContainer">
<h3>Processed file</h3>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success" id="fileSuccess"><span class="badge alert-success pull-right">Success </span></a>
</div>
</div>
<!-- Form Container -->
<div id="form-container">
<form
method="POST"
action=""
autocomplete="off">
<label for="Emails">Emails</label>
<textarea name="Emails" id="emails" cols="30" rows="10" placeholder="Email Lists" required></textarea>
<label for="names">Names</label>
<textarea name="names" id="names" cols="30" rows="10" placeholder="Names" required></textarea>
<label for="toolkitType">Toolkit Type</label>
<select
class="form-control"
name="type"
id="type"
required>
<option value="" selected>type (Select)</option>
<?php include ("_global/includes/login_select_options-approved.php");?>
</select>
<label for="requestor">requestor</label>
<select
class="form-control"
name="requestor"
id="requestor"
required>
<option value="" selected>Requestor (Select)</option>
<?php include ("_global/includes/select_options.php");?>
</select>
<button
type="button"
class="btn btn-primary"
id="previousButton"
>
PREVIOUS
</button>
<button
type="button"
class="btn btn-primary"
id="nextButton"
>
NEXT
</button>
<button
class="btn btn-primary"
type="submit"
id="massSubmit"
>
SUBMIT
</button>
</form>
</div>
</div>
</div> <!--- End Row --->
</div> <!--- End Step One--->
<div class="stepTwo">
<h2 id="confirm">Email Send Confirmation Details</h2>
<p>Before proceeding, please review the data in which the mass email will be sent out to all of the following recipients.</p>
<table class="table table-striped table-bordered table-hover" id="confirmData">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Area</th>
<th>Requestor</th>
<th>Date (<small>Date users will be added</small>)</th>
</tr>
</thead>
<tbody>
<!-- Dynamic data is being populated here from step 1 user submission to confirm --->
</tbody>
</table>
</div>