Question

我有一个包含6个tabs的多标签表单。我想将它插入数据库但我不知道如何操作。我希望它在用户填写最后一个标签时提交。当最后一个标签处于活动状态时，我还想将按钮从NEXT更改为Submit按钮。此外，我希望用户能够查看他的答案，并在选项卡之间切换。下面是验证输入字段并调整进度条的jquery。

＆＃13;

$(document).ready(function() {
  var $validator = $("#wizardForm").validate({
    rules: {

      emp_fname: {
        required: true
      },
      emp_lname: {
        required: true
      },

      gender: {
        required: true
      },

      CivilStatus: {
        required: true
      },

      citizenship: {
        required: true
      },

    }
  });

  $('#rootwizard').bootstrapWizard({
    'tabClass': 'nav nav-tabs',
    onTabShow: function(tab, navigation, index) {
      var $total = navigation.find('li').length;
      var $current = index + 1;
      var $percent = ($current / $total) * 100;
      $('#rootwizard').find('.progress-bar').css({
        width: $percent + '%'
      });
    },

    'onNext': function(tab, navigation, index) {
      var $valid = $("#wizardForm").valid();
      if (!$valid) {
        $validator.focusInvalid();
        return false;
      }
    },
    'onTabClick': function(tab, navigation, index) {
      var $valid = $("#wizardForm").valid();
      if (!$valid) {
        $validator.focusInvalid();
        return false;
      }
    },
  });
});



<!-- begin snippet: js hide: false console: true babel: false -->

＆＃13;

<form id="wizardForm" method="POST">
  <div class="tab-content">
    <div class="tab-pane active fade in" id="tab1">
      <div class="row m-b-lg">
        <div class="col-md-12">

          <div class="row">
            <div class="form-group col-md-3">
              <label for="exampleInputName">First Name</label>
              <input type="text" class="form-control" name="emp_fname" id="exampleInputName" placeholder="First Name">
            </div>
            <div class="form-group  col-md-3">
              <label for="MiddleName">Middle Name</label>
              <input type="text" class="form-control col-md-6" name="emp_mname" id="MiddleName" placeholder="Middle Name">
            </div>
            <div class="form-group  col-md-3">
              <label for="exampleInputName2">Last Name</label>
              <input type="text" class="form-control col-md-6" name="emp_lname" id="exampleInputName2" placeholder="Last Name">
            </div>
            <div class="form-group  col-md-3">
              <label for="exampleInputName2">Name Extension</label>
              <select id="extension" class="form-control col-md-2 col-xs-12" name="nameExt">
                <option selected disabled="">---</option>
                <option value="Jr.">Jr.</option>
                <option value="Sr.">Sr.</option>
              </select>
            </div>

＆＃13;

这些按钮使用户可以转到下一个标签。

＆＃13;

<ul class="pager wizard">
  <li class="previous"><a href="Add_Emp.php#" class="btn btn-default" name="Previous" id="prev">Previous</a>
  </li>
  <li class="next"><a href="Add_Emp.php#" type="submit" class="btn btn-default" name="Next" id="next">Next</a>
  </li>
</ul>

＆＃13;

Answer 1

为什么不在表格的最后一个标签上放置提交按钮？

您可以在每个标签窗格中根据需要放置下一个和上一个按钮。

您缺少上面的部分表单代码，因此它不会显示您引用的按钮。

Answer 2

更改按钮：

<ul class="pager wizard">
  <li class="previous"><div class="btn btn-default" name="Previous" id="prev">Previous</div>
  </li>
  <li class="next"><div href="Add_Emp.php#" type="submit" class="btn btn-default" name="Next" id="next">Next</div>
  </li>
  <li class="next"><input type="submit" class="btn btn-default hidden" value="Save" id="btn_save">
  </li>
</ul>

添加到您的css：

.hidden {
    display:none;
}

将您上面的Javascript更改为：

  $('#rootwizard').bootstrapWizard({
    'tabClass': 'nav nav-tabs',
    onTabShow: function(tab, navigation, index) {
      var $total = navigation.find('li').length;
      var $current = index + 1;
      var $percent = ($current / $total) * 100;
      $('#rootwizard').find('.progress-bar').css({
        width: $percent + '%'
      });
      set_buttons(index);   //  Set the button enabled and visibility
    },

    'onNext': function(tab, navigation, index) {
      var $valid = $("#wizardForm").valid();
      if (!$valid) {
        $validator.focusInvalid();
        return false;
      }
    },
    'onTabClick': function(tab, navigation, index) {
      var $valid = $("#wizardForm").valid();
      if (!$valid) {
        $validator.focusInvalid();
        return false;
      }
    },
  });
});

//  This function sets the buttons enable and visibility based on which tab is active.
function set_buttons(index) {
    if(index == 0) {
        // On first tab, so disable the previous button
        $('#prev').prop('disabled',true);
        $('#next').removeClass('hidden');       //  Make sure next is visible
        $('#btn_save').addClass('hidden');      //  Make sure save button is hidden.
    } else if(index == navigation.find('li').length) {
        // On last tab, so hide the next button, make the save button visible
        $('#prev').prop('disabled',false);      //  Make sure prev is enabled.
        $('#next').addClass('hidden');          //  Make sure next is hidden
        $('#btn_save').removeClass('hidden');   //  Make sure save button is visible.
    } else {
        //  On a middle tab (not first or last), enable previous and next buttons, hide save button
        $('#prev').prop('disabled',false);      //  Make sure prev is enabled.
        $('#next').removeClass('hidden');       //  Make sure next is visible
        $('#btn_save').addClass('hidden');      //  Make sure save button is hidden.
    }
}

我没有测试上面的代码，所以可能会有一些错误，但它应该非常接近。使用浏览器的调试器（Chrome或FireFox）查找错误。我必须做一些假设来测试最后一个标签号，并且var索引是标签的索引。

要进行测试，我必须拥有页面上的所有代码，但您应该能够通过注释和使用调试器来解决这个问题。

到达最后一个选项卡时提交多标签页

2 个答案: