如何制作一个Jquery表单?与面板上的持久值更改

How to make a Jquery form? with persisiting values on panel change

本文关键字：何制作 表单 Jquery 一个      更新时间：2023-09-26

我想创建一个Jquery表单，具有如下的表单结构

panel1{
Name
address
age 
years of experience
}
panel2{
graduation deatails.
first year marks
second year marks
third year marks
}
panel3{
some more fileds
}

然后NEXTButton previousButton

我想要实现，首先只有第一个面板应该是可见的当我点击next按钮时，第二个面板应该是可见的，而第一个和第三个面板应该是隐藏的。反之亦然。我还希望该值应该是持久化的，在next和previous上并且验证应该适用

有没有人建议我如何才能做到这一点，我是新手。

<div id="step1">
    <div>Content1 <span id="go_to_2">Next</span></div>
</div>
<div id="step2" style="display:none;">
    <div>Content2 <span id="back_to_1">Previous</span><span id="go_to_3">Next</span></div>
</div>
<div id="step3" style="display:none;">
    <div>Content4 <span id="back_to_2">Previous</span><span id="finish">finish</span>
</div>
Jquery: 

$('#go_to_2').click(function(){
    ('#step1').hide();
    ('#step2').show();
});
$('#go_to_3').click(function(){
    ('#step2').hide();
    ('#step3').show();
});
$('#finish').click(function(){
    ('#step3').hide();
    // Submit form etc
});
$('#back_to_1').click(function(){
    ('#step2').hide();
    ('#step1').show();
});
$('#back_to_2').click(function(){
    ('#step3').hide();
    ('#step2').show();
});

您可以使用不同的div标签，并使用Jquery .show()/.hide()方法

$("#divId").show();

相关文章：