Question

我在Chrome扩展程序中使用多步骤表单：https://codepen.io/atakan/pen/gqbIz

我在表单的第1步执行JavaScript API调用登录，如果登录信息不好，我想返回步骤1.否则，我想转到第2步。

有一种简单/简洁的方法可以实现这一目标吗？我在每个字段集中添加了ID并尝试了以下操作，但没有运气：

previous_fs = $("step1fs");
previous_fs.show();

这是我的登录API调用：

function login() {
    $.post("XXXXX",
    {
        ServerAction: "STEP4",
        username: document.getElementById('username').value,
        password: document.getElementById('password').value
    },
    function(data, status){
    if (data == "Login failed.") {  

        document.getElementById('error').innerHTML = "Login failed. Check username and password.";
        //Return to Step 1
    }
    else {
        document.getElementById('error').innerHTML = "";
            //response parsing goes here
            //go to step 2

            };
    })
    };

根据下面的评论，我在下面创建了一个名为next的函数。我用“父元素”替换了“this”。我试图用“next（）;”来调用它。但什么也没发生。控制台没有显示任何内容：

  function next(){
if(animating) return false;
animating = true;

current_fs = $("<input type='button' id='step1btn' class='action-button' value='Next' />").parent();
next_fs = $("<input type='button' id='step1btn' class='action-button' value='Next' />").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'
});

};

jQuery MultiStep表单：返回上一页

0 个答案: