admin管理员组文章数量:1334851
I am using jquery-steps to create an "interactive" two/three step form.
One thing I am trying to achieve is to show/hide an additional step after step 2 (which would normally be the final step) which would be the new final step based on the value of a checkbox. If it's checked, step 3 should show up, otherwise the form would submit after step 2. However, I am not sure where to start!
This is what I have so far for the javascript part.
$("#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();
},
});
I am using jquery-steps to create an "interactive" two/three step form.
One thing I am trying to achieve is to show/hide an additional step after step 2 (which would normally be the final step) which would be the new final step based on the value of a checkbox. If it's checked, step 3 should show up, otherwise the form would submit after step 2. However, I am not sure where to start!
This is what I have so far for the javascript part.
$("#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();
},
});
The full form is available on JSFiddle
Share Improve this question edited Sep 2, 2017 at 16:00 Codingmedic asked Sep 2, 2017 at 15:25 CodingmedicCodingmedic 651 gold badge1 silver badge8 bronze badges 2- Please double check the jsfiddle, there are a lot of javascript errors there... – Dekel Commented Sep 2, 2017 at 15:31
- @Codingmedic You can verify my below updated script. – Phani Kumar M Commented Sep 2, 2017 at 19:06
1 Answer
Reset to default 4Hope this updated script helps you. Paste the below code just after </form>
tag based in the JSFiddle you provided.
<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>
本文标签: javascriptJQuery steps How to showhide an additional step based on user inputStack Overflow
版权声明:本文标题:javascript - JQuery steps: How to showhide an additional step based on user input - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742256931a2441796.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论