基于 AJAX 响应代码从 jquery modal 转到下一个字段集

Posted 2023-03-24

【中文标题】基于 AJAX 响应代码从 jquery modal 转到下一个字段集

【英文标题】：Go to next fieldset from jquery modal based on AJAX response code

【发布时间】：2018-07-22 12:40:30

【问题描述】：

我正在使用此脚本从 JQuery 模式向 Mailchimp 发送 GET AJAX 调用。如果服务器响应成功，我如何将用户传递到下一个字段集？我需要从此处发布的第一个 javascript 或 php 代码中执行此操作吗？对于下面的长时间显示，我很抱歉。

JS：

  $('#reg_btn').on('click', function()
      $.ajax(
              type: "POST",
              url: 'subscribe.php',
              dataType: 'json',
              data: 
                email: $('# .email').val(),
              ,
              success: function(response) 
                // User has been successfully subscribed
                // Do something here
              ,
              error: function (jqXHR, textStatus, errorThrown) 
                 var response = $.parseJSON(jqXHR.responseText);

                 // User has not been subscribed
                // Show an error or do something else here  
             

            );

      e.preventDefault();
      return false;
  );

PHP：

    include 'Mailchimp.php';
    use \DrewM\MailChimp\MailChimp;
    $MailChimp = new MailChimp('your**api***key');
    $response = [];
    $list_id = 'list_id_goes_here';

    function emailExistsMc($subscriberMail, $list_id)
        global $MailChimp;
        $subscriber_hash = $MailChimp->subscriberHash($subscriberMail);
        $result = $MailChimp->get("lists/$list_id/members/$subscriber_hash");
        if($result['status'] == '404') return false;
        return true;
    

最后是我的 MODAL html+JS 脚本：

    <button type="submit" onclick="document.getElementById('id01').style.display='block'" > HERE IS MY BUTTON </button>
        <!-- multistep form -->
        <div id="id01" class="modalx modalx-style_set">
        <form id="msform">
        <!-- progressbar -->
        <ul id="progressbar">
        <li class="active">LOG IN</li>
        <li>TERMS</li>
        <li>INFO</li>
        </ul>
        <!-- fieldsets -->
        <fieldset>
        <input type="text" name="email" placeholder="Email" />
        <input type="text" name="code" placeholder="Promo Code" />
        <input type="button" name="next" class="next action-button" value="Next" />
        </fieldset>
        <fieldset>
        <input type="text" name="address" placeholder="Complete address" minlength="42" maxlength="42" />
        <input type="button" name="previous" class="previous action-button" value="Back" />
        <input type="button" name="next" class="next action-button" value="Next" />
        </fieldset>
        <fieldset>
        <input type="button" name="previous" class="previous action-button" value="Back" />
        </fieldset>
        </form>

       <script>
       //jQuery time
       $(document).ready(function()
         var modalx = document.getElementById('id01');

         // When the user clicks anywhere outside of the modal, close it
         window.onclick = function(event) 
             if (event.target == modalx) 
                 modalx.style.display = "none";
             
         

       var current_fs, next_fs, previous_fs; //fieldsets
       var left, opacity, scale; //fieldset properties which we will animate
       var animating; //flag to prevent quick multi-click glitches

       $(".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+')');
             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'
         );
       );

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

         current_fs = $(this).parent();
         previous_fs = $(this).parent().prev();

         //de-activate current step on progressbar
         $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

         //show the previous fieldset
         previous_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 previous_fs from 80% to 100%
             scale = 0.8 + (1 - now) * 0.2;
             //2. take current_fs to the right(50%) - from 0%
             left = ((1-now) * 50)+"%";
             //3. increase opacity of previous_fs to 1 as it moves in
             opacity = 1 - now;
             current_fs.css('left': left);
             previous_fs.css('transform': 'scale('+scale+')', 'opacity': opacity);
           ,
           duration: 800,
           complete: function()
             current_fs.hide();
             animating = false;
           ,
           //this comes from the custom easing plugin
           easing: 'easeInOutBack'
         );
       );

       $(".submit").click(function()
         return false;
       )
       )
       </script>

【问题讨论】：

从我目前读到的应该是什么？：成功：function（response）$（'#modal-div'）.html（response）.modal（）; );

【参考方案1】：

如果您的模态插件在单击注册按钮时没有自动隐藏，是的，您必须成功隐藏模态，然后找到下一个要关注的控件并调用“.focus()”。它必须是一个输入。

您也可以将其用于jQuery scroll to element 如果您的表单较长，则滚动到视图中的元素可以帮助识别下一部分。