多步表格

Question

我發現了一個多smtp表單online。然而，下一個和上一個按鈕嵌入到每個fieldset中，我希望它們不在fieldset之外，因此它們可以用於所有組。不只是一個。

對於最後一個我會.show()提交按鈕。以及隱藏前一個按鈕的第一個。

可以這樣做嗎？

---

<fieldset> 
<input type="text" name="firstname" placeholder="First Name"> 

<input type="button" name="next" class="next" value="Next"> 
</fieldset> 

<fieldset> 
<input type="text" name="lastname" placeholder="Last Name"> 

<input type="button"name="previous" class="previous" value="Previous"> 
<input type="button" name="next" class="next" value="Next"> 
</fieldset> 


<fieldset> 
<input type="text" name="email" placeholder="E-mail"> 

<input type="button" name="previous" class="previous" value="Previous"> 
<input type="submit" name="submit" value="Submit"> 
</fieldset> 

---

$(document).ready(function(){ 


    var current = 1,current_step,next_step,steps; 

    steps = $("fieldset").length; 

    $(".next").click(function(){ 

    current_step = $(this).parent(); 
    next_step = $(this).parent().next(); 
    next_step.show(); 
    current_step.hide(); 

    setProgressBar(++current); 
    }); 



    $(".previous").click(function(){ 

    current_step = $(this).parent(); 
    next_step = $(this).parent().prev(); 
    next_step.show(); 
    current_step.hide(); 

    setProgressBar(--current); 
    }); 

    setProgressBar(current); 
}); 

Answer 1

你只需要跟蹤fieldsets和當前位置的。

然後，將它們包裝在jQuery中調用一切都很簡單。看到這個例子中，基於您的代碼：

$(document).ready(function() { 
 
    var current = 0, 
 
    $form = $("form"), 
 
    $steps = $form.find("fieldset"), 
 
    numSteps = $steps.length; 
 

 
    function setProgressBar(pos) { 
 
    console.log("Step: " + pos); 
 
    } 
 

 
    function checkButtons() { 
 
    if (current <= 0) { 
 
     $(".prev").hide(); 
 
    } else { 
 
     $(".prev").show(); 
 
    } 
 

 
    if (current >= numSteps - 1) { 
 
     $(".next").hide(); 
 
     $(".submit").show(); 
 
    } else { 
 
     $(".next").show(); 
 
     $(".submit").hide(); 
 
    } 
 
    } 
 

 
    $(".next").click(function() { 
 
    $($steps[current]).hide(); 
 
    $($steps[++current]).show(); 
 
    setProgressBar(current); 
 

 
    checkButtons(); 
 
    }); 
 

 
    $(".prev").click(function() { 
 
    $($steps[current]).hide(); 
 
    $($steps[--current]).show(); 
 
    setProgressBar(current); 
 

 
    checkButtons(); 
 
    }); 
 

 
    checkButtons(); 
 
    setProgressBar(current); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <fieldset> 
 
    <input type="text" name="firstname" placeholder="First Name"> 
 
    </fieldset> 
 

 
    <fieldset style="display:none"> 
 
    <input type="text" name="lastname" placeholder="Last Name"> 
 
    </fieldset> 
 

 
    <fieldset style="display:none"> 
 
    <input type="text" name="email" placeholder="E-mail"> 
 
    </fieldset> 
 
</form> 
 

 
<input type="button" style="display:none" name="prev" class="prev" value="Previous"> 
 
<input type="button" style="display:none" name="next" class="next" value="Next"> 
 
<input type="submit" style="display:none" name="submit" class="submit" value="Submit">

您還需要採取按鈕的知名度，這是checkButtons功能是什麼照顧。我相信更多優雅的方法是可能的，但這是一個有效的方法。

另請注意display: none風格的元素在開始時隱藏。