JQuery步驟：如何顯示/隱藏基於用戶輸入的額外步驟

我正在使用jquery步驟來創建「交互式」兩步/三步形式。JQuery步驟：如何顯示/隱藏基於用戶輸入的額外步驟

我想實現的一件事是在步驟2之後顯示/隱藏額外的步驟（通常是最後一步），這將是基於複選框值的新最後一步。如果選中，則應顯示第3步，否則表單將在第2步後提交。但是，我不確定從哪裏開始！

這是我迄今爲止的JavaScript部分。

 $("#wizard").steps({ 
 
     headerTag: "h1", 
 
     bodyTag: "fieldset", 
 
     //transitionEffect: "slideLeft", 
 
     onStepChanging: function(event, currentIndex, newIndex) 
 
     { 
 
      //only apply to first step 
 
       if (currentIndex === 0 && ($('#opt1').attr('checked'))) 
 
       { 
 
         $("#wizard").steps("insert", 1, { 
 
         title: "Step Title", 
 
         content: "<p>Step Body</p>" 
 
         }); 
 
       } 
 
     return true; 
 

 
     }, 
 
     onFinished: function (event, currentIndex) 
 
     { 
 
      var form = $(this); 
 
      form.submit(); 
 

 
     }, 
 

 

 

 
    });

完整的表格可在JSFiddle

來源

2017-09-02 Codingmedic

請仔細檢查的jsfiddle，有很多的JavaScript錯誤出現的... – Dekel

@Codingmedic您可以驗證我的下面更新腳本。 –

希望這會更新腳本可以幫助你。將以下代碼粘貼到基於您提供的JSFiddle中的</form>標籤之後。

<script> 
var currentStep = 0; //store current step number 

    $("#wizard").steps({ 
    headerTag: "h1", 
    bodyTag: "fieldset", 
    //transitionEffect: "slideLeft", 

    onStepChanging: function(event, currentIndex, newIndex) 
    { 
     if (newIndex < currentIndex) return true; //Previous button click - allow 
     else if (currentIndex === 1 && ($('#opt1').is(':checked'))) return true; //If in second step and checkbox checked then proceed to Step 3 
     else if (currentIndex === 1 && (!$('#opt1').is(':checked'))) return false; //If in second step and checkbox checked then stop at Step 2 

     return true; 
    }, 

    onStepChanged: function (event, currentIndex, newIndex) { 
     currentStep = currentIndex; //Set current step number in currentStep variable 

     if (currentIndex === 1 && (!$('#opt1').is(':checked'))) //If in second step and checkbox not checked then display Finish button and hide Next button 
     { 
     $('a[href="#finish"]').parent().attr("style", "display: block;") 
     $('a[href="#next"]').parent().attr("style", "display: none;"); 
     } 
    }, 

    onFinished: function (event, currentIndex) 
    { 
     var form = $(this); 
     form.submit(); 
    }, 
    }); 

    $("#wizard-t-2").hide(); //Hide Step 3 by default 

    //Event handler for checkbox 1 
    function ShowHideDiv1(opt1) { 
    var opt1more = document.getElementById("opt1more"); 
    opt1more.style.display = opt1.checked ? "block" : "none"; 

    if (opt1.checked) 
    { 
     $("#wizard-t-2").show(); 

     if (currentStep == 1) //If in second step and checkbox checked then display Next button and hide Finish button 
     { 
     $('a[href="#finish"]').parent().attr("style", "display: none;") 
     $('a[href="#next"]').parent().attr("style", "display: block;"); 
     } 
    } 
    else 
    { 
     $("#wizard-t-2").hide(); 

     if (currentStep == 1) //If in second step and checkbox not checked then display Finish button and hide Next button 
     { 
     $('a[href="#finish"]').parent().attr("style", "display: block;") 
     $('a[href="#next"]').parent().attr("style", "display: none;"); 
     } 
    } 
    } 

    function ShowHideDiv2(opt2) { 
    var opt2more = document.getElementById("opt2more"); 
    opt2more.style.display = opt2.checked ? "block" : "none"; 
    } 

    function showVal(newVal){ 
    document.getElementById("valBox").innerHTML=newVal; 
    } 
</script>

來源

2017-09-02 17:49:58

完美的作品！謝謝！ – Codingmedic

JQuery步驟：如何顯示/隱藏基於用戶輸入的額外步驟

回答

相關問題