Question

我正在使用此脚本从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>

Answer 1

如果您的模态插件在单击注册按钮时不会自动隐藏，是的，您将成功隐藏模态，然后找到要关注的下一个控件并调用＆＃39; .focus（）＆＃39 ;.它必须是一个输入。

你也可以使用它来jQuery scroll to element滚动到视图中的元素可以帮助识别下一部分，如果你的表格更长。

根据AJAX响应代码

1 个答案: