Question

有谁能请给我一个如何创建多步骤表单的示例，其中每个阶段由onClick提交，然后使用隐藏的输入或变量来存储以前页面中的值？

例如：

第1步......

<input type="radio" name="group1" value="yes" onclick="this.form.submit()" />

<input type="radio" name="group1" value="no" onclick="this.form.submit()" />

第2步......

<input type="radio" name="group2" value="100" onclick="this.form.submit()" />

<input type="radio" name="group2" value="200" onclick="this.form.submit()" />

<input type="radio" name="group2" value="300" onclick="this.form.submit()" />


<!-- previous input -->
<input type="hidden" name="group1" value="200" />

谢谢！

Answer 1

正如我在评论中所说，只创建一个表单:(代码高度未格式化，仅用于理解目的）

<form>
     <input class='step1input'/>
     <input class='step1input'/>
      <input class='step2input'/>
     <input class='step2input'/>
     ...
 </form>

在第一步隐藏不属于那里的输入（step2input classes）

在第二步，隐藏其他输入（step1input classes）

等...

在最后一步结束时，您提交整个表格

编辑：你正在做的事情很好，只是，你只需隐藏元素，而不是提交表格。使用像这样的jquery或javascript函数：

 function goToNextStep(currentStep){
    if (currentStep==1) {
       $('input[name='group1']').hide();
       $('input[name='group2']').show();
    }else if (currentStep==2){
         ...
    }
    ...
    else if (currentStep==lastStep){
        document.form.submit();
    }
 }

第1步......

<input type="radio" name="group1" value="yes" onclick="goToNextStep(1)" />

<input type="radio" name="group1" value="no" onclick="goToNextStep(1)" />

第2步......

<input type="radio" name="group2" value="100" onclick="goToNextStep(2)" />

<input type="radio" name="group2" value="200" onclick="goToNextStep(2)" />

<input type="radio" name="group2" value="300" onclick="goToNextStep(2)" />

Answer 2

如何使用此插件：

http://www.michaelpeacock.co.uk/blog/entry/multistep-form-navigation-jquery-plugin

这个也很简单：

http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspx

或者这是一个更详细的插件：

http://webexpedition18.com/articles/how-to-create-a-multi-step-signup-form-with-css3-and-jquery/

Answer 3

基本上你错过了一个JS函数，它只显示一个相应的表单部分并隐藏其余的部分。

这是一个包含三个步骤的示例。查看JSfiddle example。

在HTML中只需插入

<body onload="shows_form_part(1)">
  <form>
    <div id="form_part1">
      <!--form elements 1-->
      <button type="button" onclick="shows_form_part(2)">&raquo;</button>
    </div>
    <div id="form_part2">
      <!--form elements 2-->
      <button type="button" onclick="shows_form_part(1)">&laquo;</button>
      <button type="button" onclick="shows_form_part(3)">&raquo;</button>
    </div>
    <div id="form_part3">
      <!--form elements 3-->
      <button type="button" onclick="shows_form_part(2)">&laquo;</button>
      <button type="button" onclick="submit_form()">Submit</button>
    </div>
  </form>
</body>

在Javascript中定义此函数，该函数仅显示相应的表单部分并隐藏其余部分。

function shows_form_part(n){
    var i = 1, p = document.getElementById("form_part"+1);
    while (p !== null){
        if (i === n){
            p.style.display = "";
        }
        else{
            p.style.display = "none";
        }
        i++;
        p = document.getElementById("form_part"+i);
    }
}

然后你只需要定义submit_form()函数。

HTML字符«和»只分别打印«和»，这对于上一个和下一个按钮字符可能很有用。

多步骤点击Javascript表单

3 个答案: