Как настроить пошаговый мастер jquery - PullRequest
Новая
       27

Как настроить пошаговый мастер jquery

0 голосов
/ 20 марта 2019

Я работаю над пошаговым мастером, использующим библиотеку jquery-steps. Но проблема в том, что кнопка отмены, которая перенаправляет пользователя в другой раздел, продолжает восстанавливаться, даже когда я нажимаю следующую кнопку. Как я могу создать его, чтобы иметь возможность отображать только один шаг, на котором я его создал, без необходимости перегенерировать другие кнопки отмены, даже если пользователь не выбрал отмену. Вот код кода jquery, над которым я работал, и остальная часть кода на jsfiddle:

https://jsfiddle.net/m8bL1oh2/

$(function() {

  let form = $('#wizard').show();

  form.steps({
    headerTag: "h2",
    bodyTag: "fieldset",
    transitionEffect: "fade",
    onStepChanging: function(event, currentIndex, newIndex) {

      switch (newIndex) {
        case 0:
          console.log("Verifying phone number");
          $('a[href$="#previous"]').html('⇽');
          $('a[href$="#next"]').html('⇾');
          var $input = $('<li aria-hidden="false" aria-disabled="false" class style="display: block;"><a href="#emailEnrollment" role="menuitem">&#10005;</a></li>');
          $input.appendTo($('ul[aria-label=Pagination]')).click(function() {
            window.location = "/enrollment/emailEnrollment";
          }).hide();

          break;
        case 1:
          console.log("Verifying code");
          $('a[href$="#previous"]').html('&#8701;');
          $('a[href$="#next"]').html('&#8702;');
          break;
        case 2:
          var $input = $('<li aria-hidden="false" aria-disabled="false" class style="display: block;"><a href="#emailEnrollment" role="menuitem">&#10005;</a></li>');
          $input.appendTo($('ul[aria-label=Pagination]')).click(function() {
            window.location = "/enrollment/emailEnrollment";
          });

          $('a[href$="#previous"]').html('&#8701;');
          $('a[href$="#next"]').html('&#10003;');
          break;
        default:
          $('a[href$="#previous"]').html('&#8701;');
          $('a[href$="#next"]').html('&#8702;');
          console.log("Add source of funds");
          break;
      }



      if (currentIndex < newIndex) {
        // To remove error styles
        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();
      return true;
    },
    labels: {
      finish: "Submit",
      next: "&#8702;",
      previous: "&#8701;",
      cancel: "No"
    }
  }).validate({
    rule: {
      phone: 'required',
      code: 'required'
    }
  });


});
.wizard,
.tabcontrol {
  display: block;
  width: 100%;
  overflow: hidden;
}

.wizard a,
.tabcontrol a {
  outline: 0;
}

.wizard ul,
.tabcontrol ul {
  list-style: none !important;
  padding: 0;
  margin: 0;
}

.wizard ul>li,
.tabcontrol ul>li {
  display: block;
  padding: 0;
}


/* Accessibility */

.wizard>.steps .current-info,
.tabcontrol>.steps .current-info {
  position: absolute;
  left: -999em;
}

.wizard>.content>.title,
.tabcontrol>.content>.title {
  position: absolute;
  left: -999em;
}


/*
    Wizard
*/

.wizard>.steps {
  position: relative;
  display: block;
  width: 100%;
}

.wizard.vertical>.steps {
  display: inline;
  float: left;
  width: 30%;
}

.wizard>.steps .number {
  font-size: 1.429em;
}

.wizard>.steps>ul>li {
  width: 25%;
}

.wizard>.steps>ul>li,
.wizard>.actions>ul>li {
  float: left;
}

.wizard.vertical>.steps>ul>li {
  float: none;
  width: 100%;
}

.wizard>.steps a,
.wizard>.steps a:hover,
.wizard>.steps a:active {
  display: block;
  width: auto;
  margin: 0 0.5em 0.5em;
  padding: 1em 1em;
  text-decoration: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.wizard>.steps .disabled a,
.wizard>.steps .disabled a:hover,
.wizard>.steps .disabled a:active {
  background: #eee;
  color: #aaa;
  cursor: default;
}

.wizard>.steps .current a,
.wizard>.steps .current a:hover,
.wizard>.steps .current a:active {
  background: #238CAD;
  color: #fff;
  cursor: default;
}

.wizard>.steps .done a,
.wizard>.steps .done a:hover,
.wizard>.steps .done a:active {
  background: #9dc8e2;
  color: #fff;
}

.wizard>.steps .error a,
.wizard>.steps .error a:hover,
.wizard>.steps .error a:active {
  background: #ff3111;
  color: #fff;
}

.wizard>.content {
  /*background: #eee;*/
  display: block;
  margin: 0.5em;
  min-height: 20em;
  overflow: hidden;
  position: relative;
  width: auto;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.wizard.vertical>.content {
  display: inline;
  float: left;
  margin: 0 2.5% 0.5em 2.5%;
  width: 65%;
}

.wizard>.content>.body {
  float: left;
  position: absolute;
  width: 95%;
  height: 95%;
  padding: 2.5%;
}

.wizard>.content>.body ul {
  list-style: disc !important;
}

.wizard>.content>.body ul>li {
  display: list-item;
}

.wizard>.content>.body>iframe {
  border: 0 none;
  width: 100%;
  height: 100%;
}

.wizard>.content>.body input {
  display: block;
  border: 1px solid #ccc;
}

.wizard>.content>.body input[type="checkbox"] {
  display: inline-block;
}

.wizard>.content>.body input.error {
  background: rgb(251, 227, 228);
  border: 1px solid #fbc2c4;
  color: #8a1f11;
}

.wizard>.content>.body label {
  display: inline-block;
  margin-bottom: 0.5em;
  font-weight: 600;
}

.wizard>.content>.body label.error {
  color: #8a1f11;
  display: inline-block;
  margin-left: 1.5em;
}

.wizard>.actions {
  position: relative;
  display: block;
  text-align: right;
  width: 100%;
}

.wizard.vertical>.actions {
  display: inline;
  float: right;
  margin: 0 2.5%;
  width: 95%;
}

.wizard>.actions>ul {
  display: inline-block;
  text-align: right;
}

.wizard>.actions>ul>li {
  margin: 0 0.5em;
}

.wizard.vertical>.actions>ul>li {
  margin: 0 0 0 1em;
}

.wizard>.actions a,
.wizard>.actions a:hover,
.wizard>.actions a:active {
  background: #238CAD;
  color: #fff;
  display: block;
  padding: 0.5em 1em;
  text-decoration: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.wizard>.actions .disabled a,
.wizard>.actions .disabled a:hover,
.wizard>.actions .disabled a:active {
  background: #eee;
  color: #aaa;
}

.wizard>.loading {}

.wizard>.loading .spinner {}


/*
    Tabcontrol
*/

.tabcontrol>.steps {
  position: relative;
  display: block;
  width: 100%;
}

.tabcontrol>.steps>ul {
  position: relative;
  margin: 6px 0 0 0;
  top: 1px;
  z-index: 1;
}

.tabcontrol>.steps>ul>li {
  float: left;
  margin: 5px 2px 0 0;
  padding: 1px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.tabcontrol>.steps>ul>li:hover {
  background: #edecec;
  border: 1px solid #bbb;
  padding: 0;
}

.tabcontrol>.steps>ul>li.current {
  background: #fff;
  border: 1px solid #bbb;
  border-bottom: 0 none;
  padding: 0 0 1px 0;
  margin-top: 0;
}

.tabcontrol>.steps>ul>li>a {
  color: #5f5f5f;
  display: inline-block;
  border: 0 none;
  margin: 0;
  padding: 10px 30px;
  text-decoration: none;
}

.tabcontrol>.steps>ul>li>a:hover {
  text-decoration: none;
}

.tabcontrol>.steps>ul>li.current>a {
  padding: 15px 30px 10px 30px;
}

.tabcontrol>.content {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 35em;
  overflow: hidden;
  border-top: 1px solid #bbb;
  padding-top: 20px;
}

.tabcontrol>.content>.body {
  float: left;
  position: absolute;
  width: 95%;
  height: 95%;
  padding: 2.5%;
}

.tabcontrol>.content>.body ul {
  list-style: disc !important;
}

.tabcontrol>.content>.body ul>li {
  display: list-item;
}

.xeno-wizard__left {
  margin-left: -20px;
}

.form-control {
  width: 107.9%;
}

.table {
  width: 200%!important;
}

.wizard th,
td {
  font-weight: 100;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.min.js"></script>

<form id="wizard" action="#">

  <h2>Contact details</h2>
  <fieldset>
    <div class="xeno-wizard__left">
      <div>
        <label>Enter phone number</label>
      </div>
      <br/>
      <div>

        <input class="form-control" required="required" name="phone" id="phone" placeholder="" />
      </div>
    </div>
  </fieldset>

  <h2>Verification code</h2>
  <fieldset>
    <div class="xeno-wizard__left">
      <div>
        <label>Enter code - check text message on your phone for code</label>
      </div>
      <br/>
      <div>
        <input class="form-control" required="required" name="code" id="code" />
      </div>
    </div>
  </fieldset>

  <h2>Confirm details</h2>
  <fieldset>
    <div class="xeno-wizard__left">
      <div>
        <label>Is this you?</label>
      </div>
      <br/>
      <table class="table">
        <tbody>
          <tr>
            <th>Full Name</th>
            <td>Krista Sunesis</td>
          </tr>
          <tr>
            <th align="left">Phone Number</th>
            <td>0782967653</td>
          </tr>
          <tr>
            <th align="left">Address</th>
            <td>Kampala</td>
          </tr>
          <tr>
            <th align="left">Email</th>
            <td>kristasunesis@gmail.com</td>
          </tr>
        </tbody>
      </table>


    </div>

  </fieldset>

  <h2>Source of funds</h2>
  <fieldset>
    <div class="xeno-wizard__left">
      <div>
        <label class="h2_label">Funding details</label>
      </div>
      <br/>
      <div class="form-group">
        <select class="form-control" id="sourceoffunds" required="required">
          <option disabled="disabled" selected="selected">Select source of funds</option>
          <option value="employment" name="employment">Employment</option>
          <option value="business" name="business">Business</option>
          <option value="inheritance" name="inheritance">Inheritance</option>
          <option value="othersourceoffunds" id="otherfundsource">Other source of funds</option>
        </select>
      </div>

      <div id="othersource" style="display: none;margin-bottom:15px">
        <input type="text" class="form-control" required="required" placeholder="Enter other source of funds" />
      </div>

      <div class="form-group">
        <input type="text" class="form-control" required="required" placeholder="Enter monthly income (UGX)" />
      </div>
      <div class="form-group">
        <input type="text" class="form-control" required="required" placeholder="Enter current net worth (UGX)" />
      </div>
      <div class="form-group">
        <input type="text" class="form-control" required="required" placeholder="Enter expected initial investment (UGX)" />
      </div>
      <div class="form-group">
        <input type="text" class="form-control" required="required" placeholder="Enter expected monthly investment (UGX)" />
      </div>
    </div>
  </fieldset>

  <h2>Bank details</h2>
  <fieldset>
    <div class="xeno-wizard__left">
      <div>
        <label class="h2_label">Banking details</label>
      </div>
      <br/>

      <div class="form-group">
        <input type="text" class="form-control" required="required" placeholder="Bank name" />
      </div>
      <div class="form-group">
        <input type="text" class="form-control" required="required" placeholder="Branch" />
      </div>
      <div class="form-group">
        <input type="text" class="form-control" required="required" placeholder="Account number" />
      </div>
      <div class="form-group">
        <input type="text" class="form-control" required="required" placeholder="Account name" />
      </div>
    </div>
  </fieldset>

  <h2>Beneficiary</h2>
  <fieldset>
    <div class="xeno-wizard__left">
      <div>
        <label class="h2_label">Beneficiary details</label>
      </div>
      <br/>

      <div class="form-group">
        <input type="text" class="form-control" required="required" placeholder="First name" />
      </div>
      <div class="form-group">
        <input type="text" class="form-control" required="required" placeholder="Middle name" />
      </div>
      <div class="form-group">
        <input type="text" class="form-control" required="required" placeholder="Last name" />
      </div>
      <div class="form-group">
        <input type="text" class="form-control" required="required" name="phone" id="beneficiaryphone" placeholder="Phone number" />
      </div>
      <div class="form-group">
        <input type="text" class="form-control" required="required" placeholder="Email" />
      </div>
      <div class="form-group">
        <input type="text" class="form-control" required="required" placeholder="Nature of  Relation" />
      </div>
      <div class="form-group">
        <input type="text" class="form-control" required="required" placeholder="Percentage" />
      </div>
    </div>
  </fieldset>
  <h2>Security questions</h2>
  <fieldset>
    <div class="xeno-wizard__left">
      <div>
        <label class="h2_label">Security question details</label>
      </div>
      <div class="form-group">
        <select class="form-control" id="question1" required="required">
          <option disabled="disabled" selected="selected">Select security question 1</option>
          <option value="answer1">What was the name of your first primary school you attended?</option>
          <option value="answer2">In what town or city did you meet your spouse/partner?</option>
          <option value="answer3">What is the name of your grandfather (on your mother’s side)?</option>
          <option value="answer4">What is the name of your grandfather (on your father’s side)?</option>
        </select>
      </div>

      <div id="qnanswer1" style="display: none;margin-bottom:15px">
        <input type="text" class="form-control" required="required" id="answer1" placeholder="Answer" />
      </div>

      <div class="form-group">
        <select class="form-control" id="question2" required="required">
          <option disabled="disabled" selected="selected">Select security question 2</option>
          <option value="answer1">What is the name of the first company you worked for?</option>
          <option value="answer2">What was the name of your secondary school?</option>
          <option value="answer3">What are the last five digits of your national ID?</option>
          <option value="answer4">What is your spouse or partner's mother's maiden name?</option>
        </select>
      </div>

      <div id="qnanswer2" style="display: none;margin-bottom:15px">
        <input type="text" class="form-control" required="required" id="answer2" placeholder="Answer" />
      </div>

      <div class="form-group">
        <select class="form-control" id="question3" required="required">
          <option disabled="disabled" selected="selected">Select security question 3</option>
          <option value="answer1">In what town or city did your mother and father meet?</option>
          <option value="answer2">What was the name of your favourite teacher?</option>
          <option value="answer3">What is the name of your dream car?</option>
          <option value="answer4">What is your grandmother's (on your mother's side) maiden name?</option>
        </select>
      </div>

      <div id="qnanswer3" style="display: none;margin-bottom:15px">
        <input type="text" class="form-control" required="required" id="answer3" placeholder="Answer" />
      </div>

    </div>
  </fieldset>

  <h2>Discovery</h2>
  <fieldset>
    <div class="xeno-wizard__left">
      <div>
        <label class="h2_label">How did you find about Us?</label>
      </div>
      <div class="form-group">
        <select class="form-control" id="discoveryOptions" required="required">
          <option disabled="disabled" selected="selected">Select discovery</option>
          <option value="social_media">Social media</option>
          <option value="employee">XENO employee</option>
          <option value="bank">My bank</option>
          <option value="financial_advisor">Financial advisor</option>
          <option value="friend">Friend</option>
          <option value="UNAA">UNAA</option>
          <option value="print_media">Print media</option>
          <option value="television">Television</option>
          <option value="mobile_or_internet_ad">Mobile/Internet Ad</option>
          <option value="podcast_or_radio">Podcast/Radio</option>
          <option value="posters_or_outdoor_ad">Posters/Outdoor Ads</option>
          <option value="other">Other</option>
        </select>
      </div>

      <div id="employee" style="display: none;margin-bottom:15px">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Specify XENO employee name" />
        </div>
      </div>
      <div id="otherdiscovery" style="display: none;margin-bottom:15px">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Specify other source of discovery" />
        </div>
      </div>
      <div id="mybank" style="display: none;margin-bottom:15px">
        <div class="form-group">
          <select class="form-control" id="discoveryBankOptions">
            <option disabled="disabled" selected="selected">Select bank</option>
            <option value="KCB">KCB</option>
            <option value="Centenary Bank">Centenary Bank</option>
            <option value="DFCU Bank">DFCU Bank</option>
            <option value="Housing Finance Bank">Housing Finance Bank</option>
          </select>
        </div>
      </div>
      <div id="financialadvisor" style="display: none;margin-bottom:15px">
        <div class="form-group">
          <select class="form-control" id="financialAdvisorOptions">
            <option disabled="disabled" selected="selected">Select financial advisor</option>
            <option value="Barbara_Byangyeru">Barbara Byangyeru</option>
          </select>
        </div>
      </div>

      <div id="friend" style="display: none;margin-bottom:15px">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Specify Friend's name" />
        </div>
      </div>

      <div id="unaa" style="display: none;margin-bottom:15px">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Specify details" />
        </div>
      </div>


    </div>
  </fieldset>
</form>

Я думаю, что что-то не так в моих условиях: 

    $(function () {

    let form = $('#wizard').show();

    form.steps({
        headerTag:"h2",
        bodyTag: "fieldset",
        transitionEffect: "fade",
        onStepChanging: function (event, currentIndex, newIndex) {

            switch (newIndex) {
                case 0:
                    console.log("Verifying phone number");
                    $('a[href$="#previous"]').html('&#8701;');
                    $('a[href$="#next"]').html('&#8702;');
                    var $input = $('<li aria-hidden="false" aria-disabled="false" class style="display: block;"><a href="#emailEnrollment" role="menuitem">&#10005;</a></li>');
                    $input.appendTo($('ul[aria-label=Pagination]')).click(function () {
                        window.location = "/enrollment/emailEnrollment";
                    }).hide();

                    break;
                case 1:
                    console.log("Verifying code");
                    $('a[href$="#previous"]').html('&#8701;');
                    $('a[href$="#next"]').html('&#8702;');
                    break;
                case 2:
                    var $input = $('<li aria-hidden="false" aria-disabled="false" class style="display: block;"><a href="#emailEnrollment" role="menuitem">&#10005;</a></li>');
                    $input.appendTo($('ul[aria-label=Pagination]')).click(function () {
                        window.location = "/enrollment/emailEnrollment";
                    });

                    $('a[href$="#previous"]').html('&#8701;');
                    $('a[href$="#next"]').html('&#10003;');
                    break;
                default:
                    $('a[href$="#previous"]').html('&#8701;');
                    $('a[href$="#next"]').html('&#8702;');
                    console.log("Add source of funds");
            }


            if(newIndex === "Identity"){
                $('a[href$="#previous"]').html('&#8701;');
                $('a[href$="#next"]').html('&#8702;');
            }
            if (currentIndex < newIndex)
            {
                // To remove error styles
                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();
            return true;
        },
        labels:{
            finish: "Submit",
            next: "&#8702;",
            previous: "&#8701;",
            cancel: "No"
        }
    }).validate({
        rule:{
            phone: 'required',
            code: 'required'
        }
    });
});
...