在单页面上用PHP创建多步骤的多个表单

时间:2016-04-27 08:51:43

标签: javascript php forms radio-button

我有3个单选按钮,点击它们每个都会出现一个表单,并且每个表单里面都会有3个步骤。我在单击单击按钮上创建了一个带有多步骤的表单。但我在制作另外两个时遇到了麻烦。请帮帮我

1 个答案:

答案 0 :(得分:0)

我已经创建了一个基本结构,这样当你点击表单1单选按钮时,表单1将打开,同一个进程将用于表单2和表单3.

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
    .dsp_none
    {
        display:none;
    }
</style>
<input type="radio" class="form1" name="form1"/>Form1 <br>
<input type="radio" class="form2" name="form1" />Form2 <br>
<input type="radio" class="form3" name="form1" />Form3 <br>
<div class="form1_form dsp_none">
    This is form1
</div>
<div class="form2_form dsp_none">
    This is form2
</div>
<div class="form3_form dsp_none">
    This is form3
</div>
<script type="text/javascript">
    jQuery('document').ready(function(){
        jQuery('.form1').click(function(){
            jQuery('.form1_form').css('display','block');
            jQuery('.form2_form').css('display','none');
            jQuery('.form3_form').css('display','none');
        });
        jQuery('.form2').click(function(){
            jQuery('.form2_form').css('display','block');
            jQuery('.form3_form').css('display','none');
            jQuery('.form1_form').css('display','none');
        });
        jQuery('.form3').click(function(){
            jQuery('.form3_form').css('display','block');
            jQuery('.form1_form').css('display','none');
            jQuery('.form2_form').css('display','none');
        });
    });
</script>

只需要将您为一个多步骤表单创建的代码粘贴到div中,该类是form1_form,form2_form,form3_form。并相应地更改多步形式的类。