1

谁能给我一个示例，说明如何创建一个多步骤表单，其中每个阶段由 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" />

谢谢！

4

3 回答 3

1

所以正如我在评论中所说，只创建一种形式：（代码高度未格式化，仅用于理解目的）

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

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

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

ETC...

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

编辑：您所做的很好，只是，您无需提交表单，而是隐藏元素。使用这样的 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)" />
于 2012-04-19T10:00:48.673 回答
0

使用类似这样的插件怎么样：

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/

于 2012-04-19T09:47:30.973 回答
0

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

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

在 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 字符&laquo;和&raquo;分别打印 « 和 » 这对于上一个和下一个按钮字符可能很有趣。

于 2017-02-19T21:59:17.080 回答