在步骤中提交表单向导

Question

我被困在下一步提交每个步骤的功能上。每个步骤都有自己的数据库表，它将存储在其中。我正在尝试将每个步骤数据发布到数据库中，同时单击"下一步"按钮。它会在"完成"按钮上提交，但不是在每个步骤上提交。

我尝试在保存的每个步骤中使用自己的个人按钮提交，它会发布数据，但是发布后我无法弄清楚如何将其恢复到下一步的表单中。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="body">
<form id="wizard_with_validation" method="POST" action="TestPage.php">
<h3>Account Information</h3>
<fieldset>
<div class="form-group form-float">
<div class="form-line">
<input type="text" class="form-control" name="username" required>
<label class="form-label">Username*</label>
</div>
</div>
<div class="form-group form-float">
<div class="form-line">
<input type="password" class="form-control" name="password" id="password" required>
<label class="form-label">Password*</label>
</div>
</div>
<div class="col-md-12">
<button type="submit" name="AccountInfoSubmit" id="AccountInfoSubmit" value="SAVE" class="btn bg-teal waves-effect">
<i class="material-icons">save</i>
<span>SAVE</span>
</button>
</div>
</fieldset>
<h3>Contact Information</h3>
<fieldset>
<div class="form-group form-float">
<div class="form-line">
<input type="number" class="form-control" name="tel" required>
<label class="form-label">Telephone*</label>
</div>
</div>
<div class="form-group form-float">
<div class="form-line">
<input type="email" class="form-control" name="Email" id="email" required>
<label class="form-label">Email*</label>
</div>
</div>
<div class="col-md-12">
<button type="submit" name="ContactInfoSubmit" value="SAVE" class="btn bg-teal waves-effect">
</button>
</div>
</fieldset>

var form = $('#wizard_with_validation').show();
form.steps({
headerTag: 'h3',
bodyTag: 'fieldset',
transitionEffect: 'slideLeft',
onInit: function(event, currentIndex) {
$.AdminBSB.input.activate();
//Set tab width
var $tab = $(event.currentTarget).find('ul[role="tablist"] li');
var tabCount = $tab.length;
$tab.css('width', (100 / tabCount) + '%');
//set button waves effect
setButtonWavesEffect(event);
},
onStepChanging: function(event, currentIndex, newIndex) {
if (currentIndex > newIndex) {
return true;
}
if (currentIndex < newIndex) {
form.find('.body:eq(' + newIndex + ') label.error').remove();
form.find('.body:eq(' + newIndex + ') .error').removeClass('error');
}
form.validate().settings.ignore = ':disabled,:hidden';
return form.valid();
},
onStepChanged: function(event, currentIndex, priorIndex) {
$('#AccountInfoSubmit').click();
setButtonWavesEffect(event);
},
onFinishing: function(event, currentIndex) {
form.validate().settings.ignore = ':disabled';
return form.valid();
},
onFinished: function(event, currentIndex) {
$('#wizard_with_validation').submit();
}
});

Answer 1

我尝试在保存的每个步骤中使用自己的个人按钮提交，它会发布数据，但是发布后我无法弄清楚如何将其恢复到下一步的表单上。

服务器可以返回当前步骤的索引。这样，您就知道下一步需要渲染哪个步骤。