Question

我在MVC应用程序中使用Jquery Form向导插件。 http://thecodemine.org/ 我有一个4步骤的表格。在其中一个步骤中我有上传功能。我希望在每个步骤以及后退和后续步骤中提交功能。后面的步骤是可选的。

我能够在导航中添加提交按钮。单击它时，仅提交与活动步骤相关的表单数据，其他数据为空。

为了更清楚我的问题：查看：

<form id="myform" method="post" action="/Controller/Action">
    <div id="fieldWrapper">
        <fieldset class="step fieldset" id="first">
            <legend class="legend">First step</legend>
            Some input controls
        </fieldset>
        <fieldset class="step fieldset" id="second">
            <legend class="legend">Second step</legend>
            some more input controls (optional)
        </fieldset>
        <fieldset class="step fieldset" id="third">
            <legend class="legend">Third step</legend>
            some more input controls with filu upload
            (optional)
        </fieldset>
        <fieldset class="step fieldset" id="fourth">
            <legend class="legend">Fourth step</legend>
            some more input controls (optional)
        </fieldset>
    </div>
    <div id="demoNavigation">
        <input class="navigation_button" id="back" value="Back" type="reset" />
        <button type="submit" id="submitBtn">Submit and Finish</button>
        <input class="navigation_button" id="next" value="Next" type="submit" />
    </div>
    </form>

脚本：

<script type="text/javascript">
    $(function () {
        $("#myform").formwizard({
            validationEnabled: true,
            focusFirstInput: false,
            disableUIStyles: true,
            textSubmit: 'Submit and Finish',
            textNext: 'Continue to next step',
            next: "input:submit"
        }
        );
    });
</script>

更新了Jquery.form.wizard.js，以便在最后一步隐藏提交按钮。现在每一步我都有提交按钮和导航按钮。

当我在第二步提交表单时，第二步中的表单数据仅发布，其余未发布。

我查看了样本，但找不到合适的样本。有谁能建议如何实现这个目标？

Answer 1

我浏览了文档和jquery.form.wizard.js文件，以便更好地了解所做的工作。

我只需编写如下脚本：

<script type="text/javascript">
    $(function () {
        $("#myform").formwizard({
            validationEnabled: true,
            focusFirstInput: false,
            disableUIStyles: true,
            textSubmit: 'Submit and Finish',
            textNext: 'Continue to next step',
            next: "input:submit"
        }
        );
    });
    $('#submitBtn').click(function () {
        var stepInfo = $('#myform').formwizard('state');
        for (var i = 0; i < stepInfo.activatedSteps.length; i++) {
            stepInfo.steps.filter("#" + stepInfo.activatedSteps[i]).find(":input").not(".wizard-ignore").removeAttr("disabled");
        }
    });
</script>

使用Jquery表单向导在每个步骤提交表单

1 个答案: