Блог

Главная - Вопросы по программированию - Кнопка отправки ответа не переходит к следующему шагу (набор полей), но нажатие следующей кнопки делает

Кнопка отправки ответа не переходит к следующему шагу (набор полей), но нажатие следующей кнопки делает

#javascript #html #jquery #angularjs

#javascript #HTML #jquery #angularjs

Вопрос:

У меня простая вкладка с несколькими формами. Он работает нормально, и когда я нажимаю кнопку далее внутри каждого набора полей, он переходит к следующему набору полей. Это отлично работает, но я создал новую кнопку «Отправить ответ» внутри первого набора полей, которая будет вызывать функцию Angularjs, и после завершения отправки ответа внутри блока успеха я пытаюсь использовать ту же логику следующей кнопки, которая переходит к следующему набору полей. Это не работает внутри блока успеха отправки ответа. Есть ли что-то, чего мне не хватает? Внешняя кнопка next в первом наборе полей отлично работает.

 <!-- fieldsets -->
        <fieldset>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group text-center">
                        <strong>Test</strong>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="form-group text-center">
                        <input type="text" class="form-control" id="txt-Answer" name="txt-Answer" maxlength="100" ng-model="testAnswer" style="width:120%;" />
                    </div>
                </div>
                <br />
                <div class="row">
                    <div class="col-md-12 text-center">
                        <input type="button" name="btnSubmitAnswer" class="next action-button" value="Submit Answer" ng-click="submitAnswer(userInfo.UserSecurityQuestion[0].SecurityQuestionId);" />
                    </div>
                </div>
            </div>
            <input type="button" name="next" class="next action-button" value="Next" />
        </fieldset>
        <fieldset>
            <h2 class="fs-title">Test</h2>
            <h3 class="fs-subtitle">Test</h3>
            @*<input type="text" name="twitter" placeholder="Twitter" />
        <input type="text" name="facebook" placeholder="Facebook" />
        <input type="text" name="gplus" placeholder="Google Plus" />*@
            @*<input type="button" name="previous" class="previous action-button" value="Previous" />
        <input type="button" name="next" class="next action-button" value="Next" />*@
            <input type="submit" name="submit" class="submit action-button" value="Submit" />
        </fieldset>
        @*<fieldset>
            <h2 class="fs-title">Test</h2>
            <h3 class="fs-subtitle">We will never sell it</h3>
            <input type="text" name="fname" placeholder="First Name" />
            <input type="text" name="lname" placeholder="Last Name" />
            <input type="text" name="phone" placeholder="Phone" />
            <textarea name="address" placeholder="Address"></textarea>
            <input type="button" name="previous" class="previous action-button" value="Previous" />
            <input type="submit" name="submit" class="submit action-button" value="Submit" />
        </fieldset>*@

Следующее нажатие кнопки — это работает

 $(".next").click(function () {
            if (animating) return false;
            animating = true;

            current_fs = $(this).parent();
            next_fs = $(this).parent().next();

            //activate next step on progressbar using the index of next_fs
            $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

            //show the next fieldset
            next_fs.show();
            //hide the current fieldset with style
            current_fs.animate({ opacity: 0 }, {
                step: function (now, mx) {
                    //as the opacity of current_fs reduces to 0 - stored in "now"
                    //1. scale current_fs down to 80%
                    scale = 1 - (1 - now) * 0.2;
                    //2. bring next_fs from the right(50%)
                    left = (now * 50)   "%";
                    //3. increase opacity of next_fs to 1 as it moves in
                    opacity = 1 - now;
                    current_fs.css({
                        'transform': 'scale('   scale   ')',
                        'position': 'absolute'
                    });
                    next_fs.css({ 'left': left, 'opacity': opacity });
                },
                duration: 800,
                complete: function () {
                    current_fs.hide();
                    animating = false;
                },
                //this comes from the custom easing plugin
                easing: 'easeInOutBack'
            });
        });

Нажатие кнопки отправки ответа — это не работает (не переходит к шагу 2 (набор полей)

 $scope.submitAnswer = function ()
        {
                $http({
                    method: 'POST',
                    url: window.location.protocol   '//'   window.location.host   '/Home/SubmitAnswer'
                }).then(
                    function (response) {
                        //Response Message
                        if (response.data.isMatchedResult)
                        {
                            nextFieldSet();
                            
                        }
                    }
                );
            }
        }
        
        function nextFieldSet()
        {
            if (animating) return false;
            animating = true;

            current_fs = $(this).parent();
            next_fs = $(this).parent().next();

            //activate next step on progressbar using the index of next_fs
            $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

            //show the next fieldset
            next_fs.show();
            //hide the current fieldset with style
            current_fs.animate({ opacity: 0 }, {
                step: function (now, mx) {
                    //as the opacity of current_fs reduces to 0 - stored in "now"
                    //1. scale current_fs down to 80%
                    scale = 1 - (1 - now) * 0.2;
                    //2. bring next_fs from the right(50%)
                    left = (now * 50)   "%";
                    //3. increase opacity of next_fs to 1 as it moves in
                    opacity = 1 - now;
                    current_fs.css({
                        'transform': 'scale('   scale   ')',
                        'position': 'absolute'
                    });
                    next_fs.css({ 'left': left, 'opacity': opacity });
                },
                duration: 800,
                complete: function () {
                    current_fs.hide();
                    animating = false;
                },
                //this comes from the custom easing plugin
                easing: 'easeInOutBack'
            });
        }

Комментарии:

1. можете ли вы использовать этот рабочий фрагмент?

2. Это как-то связано с Parent.Next()

Ответ №1:

Вы используете this внутри своей функции nextFieldSet , которая не ссылается ни на один элемент. Вот почему внутри вашей функции ничего не работает. Вместо этого вы можете использовать progressbar , чтобы получить индекс li , у которого есть класс active , так как при нажатии на .next кнопку вы добавляете к нему активный класс.

Затем используйте это index , чтобы получить fieldset то, что находится в этой позиции, используя $("fieldset:eq(" next_fs ")") это, вы получите ссылку на набор полей, который вам нужно скрыть.То же самое вы можете сделать для другого fieldset , который вам нужно показать следующим.

Демонстрационный код (в приведенном ниже коде вместо angularjs я просто использую событие click и вызываю nextFieldSet оттуда) :

 $("fieldset:first").fadeIn(); //show first fieldset
var animating;
$(".next").click(function() {
  if (animating) return false;
  animating = true;
  current_fs = $(this).parent();
  next_fs = $(this).parent().next();
  //remove current active
  $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active")
  $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

  next_fs.show();
  //hide the current fieldset with style
  current_fs.animate({
    opacity: 0
  }, {
    step: function(now, mx) {
      scale = 1 - (1 - now) * 0.2;
      left = (now * 50)   "%";
      opacity = 1 - now;
      current_fs.css({
        'transform': 'scale('   scale   ')',
        'position': 'absolute'
      });
      next_fs.css({
        'left': left,
        'opacity': opacity
      });
    },
    duration: 800,
    complete: function() {
      current_fs.hide();
      animating = false;
    },
    //this comes from the custom easing plugin
    easing: 'easeInOutBack'
  });
});
//suppose submit button is click 
$(".action-button").click(function() {
  //call function
  nextFieldSet()
})

function nextFieldSet() {
  if (animating) return false;
  animating = true;
  //get active li index
  current_fs = $("#progressbar li.active").index();
  //for next div add 1
  next_fs = $("#progressbar li.active").index()   1;
  $("#progressbar li").eq(current_fs).removeClass("active") //remove current active
  //activate next step on progressbar using the index of next_fs
  $("#progressbar li").eq(next_fs).addClass("active");
  var next_divs = $("fieldset:eq("   next_fs   ")") //find the fieldset eq 
  var current_div = $("fieldset:eq("   current_fs   ")")
  //show the next fieldset
  next_divs.show();
  //hide the current fieldset with style
  current_div.animate({
    opacity: 0
  }, {
    step: function(now, mx) {
      scale = 1 - (1 - now) * 0.2;
      left = (now * 50)   "%";
      opacity = 1 - now;
      current_div.css({
        'transform': 'scale('   scale   ')',
        'position': 'absolute'
      });
      next_divs.css({
        'left': left,
        'opacity': opacity
      });
    },
    duration: 800,
    complete: function() {
      current_div.hide();
      animating = false;
    },
    easing: 'easeInOutBack'
  });
}  
 fieldset {
  display: none;
}

.active {
  color: red;
}  
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js?ver=5.3.2'></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<ul id="progressbar">
  <li class="active"><strong>1</strong></li>
  <li><strong>2</strong></li>
  <li><strong>3</strong></li>

</ul>
<div class="fields">
  <fieldset>
    <div class="row">
      <div class="col-md-12">
        <div class="form-group text-center">
          <strong>Test</strong>
        </div>
      </div>
      <div class="col-md-12">
        <div class="form-group text-center">
          <input type="text" class="form-control" id="txt-Answer" name="txt-Answer" maxlength="100" ng-model="testAnswer" style="width:120%;" />
        </div>
      </div>
      <br />
      <div class="row">
        <div class="col-md-12 text-center">
          <input type="button" name="btnSubmitAnswer" class=" action-button" value="Submit Answer" ng-click="submitAnswer(userInfo.UserSecurityQuestion[0].SecurityQuestionId);" />
        </div>
      </div>
    </div>
    <input type="button" name="next" class="next action-button" value="Next" />
  </fieldset>
  <fieldset>
    <h2 class="fs-title">Test</h2>
    <h3 class="fs-subtitle">Test</h3>
    <input type="text" name="twitter" placeholder="Twitter" />
    <input type="text" name="facebook" placeholder="Facebook" />
    <input type="text" name="gplus" placeholder="Google Plus" />
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="button" name="next" class="next action-button" value="Next" />
    <input type="submit" name="submit" class="submit action-button" value="Submit" />
  </fieldset>
  <fieldset>
    <h2 class="fs-title">Test</h2>
    <h3 class="fs-subtitle">We will never sell it</h3>
    <input type="text" name="fname" placeholder="First Name" />
    <input type="text" name="lname" placeholder="Last Name" />
    <input type="text" name="phone" placeholder="Phone" />
    <textarea name="address" placeholder="Address"></textarea>
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="submit" name="submit" class="submit action-button" value="Submit" />
  </fieldset>
</div>