Question

问题

我有一个表格，分为五个不同的部分。 查找下面的图片。当一个人进入此页面时，我将他/她直接指向摘要阶段，其中预先填充的数据正常工作。出现问题的地方是，用户可以通过点击上一步按钮来编辑此表单。在用户更改前几个阶段中的值并返回到摘要阶段后，它仍会向他们显示通过预先填充的数据提供的默认信息，但是当用户提交表单时，它会使用新编辑的数据提交正确的信息。

有什么方法可以刷新或重装吗？我正在使用以下代码来显示此摘要。

代码

//Button to reach the summary stage    
<button type="button" class="next" id="summary" onclick="loadnext(4,5);"><img src="images/next.jpg" alt="" /> </button>


//Display
<tr>
    <td>Team Name</td>
    <td id='t_name_SUM'></td>
</tr>
<tr>
    <td>Team Visibility</td>
    <td id='t_visibility_SUM'></td>
</tr>

Answer 1

为了更好地支持我的评论，我正在写这个答案。

您需要做的是提供一种逐步收集数据的机制。将HTML复制到其他元素中并不是一种非常灵活的方法。

我创建了jsfiddle to demonstrate the idea。它远非完美，但在这个阶段它的工作并没有让事情变得复杂。

基本思想是让一个对象来控制用户需要处理的视图（步骤）的流程。每个视图都有一个与之关联的控制器来处理数据。

观点。

<div id="step1" class="view">
    <h3>Step #1</h3>
    <input type="text" name="name" value="" />
</div>

<div id="step2" class="view">
    <h3>Step #2</h3>
    <input type="text" name="title" value="" />
</div>

<div id="step3" class="view">
    <h3>Step #3</h3>
    <input type="text" name="message" value="" />
</div>

控制流程的对象（仅显示最相关的部分）。

var flow = {
    ...
    settings:{}, // settings to save
    routes: [
        {controller:Step1Ctrl, element:'#step1'},
        {controller:Step2Ctrl, element:'#step2'},
        {controller:Step3Ctrl, element:'#step3'} 
    ],

    ...

    show: function (index) {
        var route = this.routes[index];

        if (this.currentController) {
            this.currentController.commit();
        }

        this.index = index;
        this.currentController = new route.controller(
            this.settings, 
            route.element
        );
    }
};

每次显示新视图时，当前控制器都会将更改提交到settings，并为当前视图创建一个新控制器。

一个简单的控制器可能看起来像这样。

function Step1Ctrl(settings, element) {

    var $e = $(element).find('input[name="name"]');
    $e.val(settings.name);  //set the initial value

    this.commit = function () {
        settings.name = $e.val(); //save
    };
}

由于现在每个控制器都将其更改为settings，因此您可以轻松地以您喜欢的任何方式表示数据。小提琴只是提醒收集的数据，但您可以轻松创建另一个视图和另一个控制器来显示这些设置。

此外，由于每个控制器都可以访问设置，因此它可以对已经存在的值进行操作，或者检查设置的组合是否可行。

如何通过多个步骤收集表单数据并进行总结

1 个答案: