FuelUX wizard not navigating to next step on including in a form

女生的网名这么多〃 提交于 2019-12-12 03:23:12

问题


Can anyone tell me how to use the form tag with the fuelUX wizard? I am doing the following:

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Insert title here</title>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="../../style/sb-admin-2.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="../../style/ladda-themeless.min.css">
  <link rel="stylesheet" href="//www.fuelcdn.com/fuelux/3.5.0/css/fuelux.min.css">
  <script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="//www.fuelcdn.com/fuelux/3.5.0/js/fuelux.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="col-lg-12">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <i class="fa fa-user fa-2x"></i> Registration Form
        </div>
        <div class="panel-body">

          <div class="fuelux">
            <div class="wizard" data-initialize="wizard" id="registerWizard">
              <ul style="margin-left: 0" class="steps">
                <li data-step="1" class="active"><span class="badge badge-info">1</span>Personal Details<span class="chevron"></span>
                </li>
                <li data-step="2"><span class="badge">2</span>Work Section Information
                  <span class="chevron"></span>
                </li>
                <li data-step="3"><span class="badge">3</span>Verify All The Details<span class="chevron"></span>
                </li>
              </ul>
              <div class="actions">
                <button disabled="disabled" class="btn btn-default btn-prev">
                  <span class="fa fa-arrow-left"></span> Prev
                </button>
                <button class="btn btn-default btn-next" data-last="Done !">
                  Next <span class="fa fa-arrow-right"></span>
                </button>
              </div>
              <!-- ./End actions -->
              <div class="step-content">
                <div class="step-pane sample-pane alert active" data-step="1">
                  <h4>Personal Information</h4>
                  <hr>
                  <form role="form" method="post" action="" id="personalInfoForm" class="form-horizontal">
                    <div class="form-group">
                      <label class="control-label col-sm-4" for="email">Full Name:</label>
                      <div class="col-sm-6">
                        <input type="text" class="form-control" id="fullname" placeholder="Enter Full Name">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="control-label col-sm-4" for="email">Email:</label>
                      <div class="col-sm-6">
                        <input type="email" class="form-control" id="email" placeholder="Enter Email">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="control-label col-sm-4" for="pwd">Mobile No:</label>
                      <div class="col-sm-6">
                        <input type="text" class="form-control" id="mid" placeholder="Enter Mobile Number">
                      </div>
                    </div>

                    
                  </form>
                </div>
                <div class="step-pane sample-pane bg-info alert" data-step="2">
                  <h4>Work Section Information</h4>
                  <p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.</p>
                </div>
                <div class="step-pane sample-pane bg-danger alert" data-step="3">
                  <h4>Verify All The Details</h4>
                  <p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki
                    bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p>
                </div>
              </div>
              <!-- ./End Step-content -->
            </div>
            <!-- ./End wizard -->
          </div>
          <!-- ./ End fuelux -->

          <script type="text/javascript">
            $("#registerWizard").wizard();
          </script>

        </div>
        <div class="panel-footer">
          <button id="register" class="btn btn-lg btn-success ladda-button" data-style="expand-right">
            <span class="ladda-label"><i class="fa fa-check"></i>
							Register !</span>  <span class="ladda-spinner"></span>  <span class="ladda-spinner"></span>
            <div class="ladda-progress progress-bar" style="width: 105px;"></div>
          </button>
          <script type="text/javascript" src="../../js/ladda.spin.min.js"></script>
          <script type="text/javascript" src="../../js/ladda.js"></script>
          <script type="text/javascript">
            Ladda.bind('.ladda-button', {
              timeout: 2000
            });
            var laddaLoadingButton = Ladda.create(document
              .querySelector("#register"));
            $.ajax({
              // some config
              beforeSend: $("#register").click(
                function() {
                  // When before sending the request, make the button loading
                  laddaLoadingButton.start();
                  laddaLoadingButton.setProgress(0);
                  var progress = 0;
                  var interval = setInterval(function() {
                    progress = Math.min(progress + Math.random() * 0.1, 1);
                    laddaLoadingButton
                      .setProgress(progress);
                    if (progress === 1) {
                      laddaLoadingButton.stop();
                      clearInterval(interval);
                    }
                  }, 200);
                }),
              success: function() {
                // When complete the request, make the button stop
                laddaLoadingButton.setProgress(1);
                laddaLoadingButton.stop();
              }
            });
          </script>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Whenever I include the tag at the start of the and end the form tag at the close of the div, i am not able to navigate to the next step. My guess is, when ever i am hitting the next button the form is getting submitted and reloading the page. I tried to fix this by writing JS code on the button. But it was not serving my purpose. Can anyone help me solve this issue? I want to be able to navigate through the wizard and at the same time be able to capture the user information in the form. Should i use multiple forms? or will only one form solve my problem? Please help.


回答1:


Try adding type="button" to your button markup. Buttons without this will submit forms.



来源:https://stackoverflow.com/questions/27979019/fuelux-wizard-not-navigating-to-next-step-on-including-in-a-form

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!