javascript - 提交表单向导步骤

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 3 年前。

Improve this 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

I have tried to submit while using own personal button of each step which is save, it posts data, but after posting I am not able to figure out how to get it back on the form next step.

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