Javascript 多页表单提交

我有一个问题，我似乎无法解决

首先，我有一个由专业人士创建的网站，我们与该公司不再有工作关系。我现在自己管理这个网站。我很有能力，但我绝对不是一个有经验的网络开发人员

背景：我们有一个应用程序，它使用呈现给最终用户的多页表单。表单由7个步骤组成，但都是从一个php文件完成的，使用（我认为）jquery/javascript循环完成这些步骤，并验证一些字段。在最后一步中，将显示摘要供用户提交。这个很好用

以下是我认为处理页面循环的相关javascript：

<script>
$(function () {

    window.confirmLeave = true;

    $('.datefield').datepicker();

    var cache = {};                                                                                             // caching inputs for the visited steps

    $("#appForm").bind("step_shown", function(event,data){  

         if(data.isLastStep){                                                                                      // if this is the last step...then
                $("#summaryContainer").empty();                                                                     // empty the container holding the 
                $.each(data.activatedSteps, function(i, id){                                                        // for each of the activated steps...do
                    if(id === "summary") return;                                                                    // if it is the summary page then just return
                    cache[id] = $("#" + id).find(".input");                                                         // else, find the div:s with class="input" and cache them with a key equal to the current step id
                    cache[id].detach().appendTo('#summaryContainer').show().find(":input").removeAttr("disabled");  // detach the cached inputs and append them to the summary container, also show and enable them
                });
            }else if(data.previousStep === "summary"){                                                              // if we are movin back from the summary page
                $.each(cache, function(id, inputs){                                                                 // for each of the keys in the cache...do
                    var i = inputs.detach().appendTo("#" + id).find(":input");                                      // put the input divs back into their normal step
                    if(id === data.currentStep){                                                                    // (we are moving back from the summary page so...) if enable inputs on the current step
                         i.removeAttr("disabled");
                    }else{                                                                                          // disable the inputs on the rest of the steps
                        i.attr("disabled","disabled");
                    }
                });
                cache = {};                                                                                         // empty the cache again
            }
        });

</script>

在这个过程中，我可以用firebug观看，并看到显示：无；与该字段集交互时，循环并更改为“块”

问题是：我们没有以任何方式为用户构建以保存进度并在以后完成。我现在正试图这么做。我已经成功地创建了“save”按钮，它触发一个javascript来更改表单的操作，将数据发布到一个新的php文件中，该文件处理POST数据并将其处理到MySQL中。但是，这是可行的，POST只传递当前查看的字段集的数据，而不是发布所有数据。我无法确定如何确保所有表单数据都已发布。任何指导或建议都会有所帮助。谢谢

编辑：

我能够通过以下内容获得要加载的正确页面：

$(function(){ $('#appForm').formwizard('show','" . $row["current_step"] . "'); }); 

这将加载正确的页面。现在的问题是，这的最后一步是一个摘要页面，显示最终提交的所有输入元素。但是，它似乎只显示所查看页面中的元素，我很确定是数组“data.activatedSteps”决定了元素是否在最终摘要中显示。你的代码能比我的更好地解决这个问题吗？再次感谢您在这方面的帮助

属性为“禁用”的对象不会在post/get中返回

这就是在您的问题中需要注意的javascript

if(id === data.currentStep){                                                                    // (we are moving back from the summary page so...) if enable inputs on the current step
    i.removeAttr("disabled");
}else{                                                                                          // disable the inputs on the rest of the steps
    i.attr("disabled","disabled");
}

这就是前一个编码器如何控制用户可以编辑的内容。如果您希望在用户首先点击“保存”按钮时返回所有值

removeAttr("disabled");

从页面上的所有内容，然后提交post/get

看起来，前面的编码人员通过遍历页面上的所有数据并使其在此处不被禁用来实现这一点

if(data.isLastStep){                                                                                    // if this is the last step...then
    $("#summaryContainer").empty();                                                                     // empty the container holding the 
    $.each(data.activatedSteps, function(i, id){                                                        // for each of the activated steps...do
        if(id === "summary") return;                                                                    // if it is the summary page then just return
        cache[id] = $("#" + id).find(".input");                                                         // else, find the div:s with class="input" and cache them with a key equal to the current step id
        cache[id].detach().appendTo('#summaryContainer').show().find(":input").removeAttr("disabled");  // detach the cached inputs and append them to the summary container, also show and enable them
    });
}

因此，您可以在发布返回时调用该代码，或者执行类似操作以启用页面上的输入

编辑： 根据你的评论，我建议你用这个来解决你的问题，这样你就可以用相同的工具和库来操作页面上的对象。而且JQuery非常方便

$(':input.ui-wizard-content').each(function() {$( this ).removeAttr("disabled");});

：input

获取页面上的所有输入

.ui向导内容

告诉JQuery只查找该类的输入，然后再查找

。每个

循环遍历在找到的对象上运行lambda函数（

function（）{$（this）.removeAttr（“disabled”）；}

）的每个对象

编辑2： 很难说代码中有什么

$row[]

。它显然是一个容器，但您提供的代码有点脱离上下文，所以我不能确定它是什么

也就是说，如果我只使用DOM（页面上的内容的Java脚本表示），并且我知道您之前发布的函数，我会这样做

替换

if(data.isLastStep){                                                                                    // if this is the last step...then
    $("#summaryContainer").empty();                                                                     // empty the container holding the 
    $.each(data.activatedSteps, function(i, id){                                                        // for each of the activated steps...do
        if(id === "summary") return;                                                                    // if it is the summary page then just return
        cache[id] = $("#" + id).find(".input");                                                         // else, find the div:s with class="input" and cache them with a key equal to the current step id
        cache[id].detach().appendTo('#summaryContainer').show().find(":input").removeAttr("disabled");  // detach the cached inputs and append them to the summary container, also show and enable them
    });
}

与

这主要是借鉴了以前的程序员所做的工作。由于他创建的工作流，他假设表单中的所有内容都在

data.activatedSteps

中，但情况不再如此。因此，您需要查看他将数据添加到

data.activatedSteps

的位置，并在重新加载时以相同的方式将保存的内容放入其中。或者只使用我的行忽略所有

数据

内容，用类

输入

获取对象中的每个

，并将其添加到容器中

---

注意：JQuery的

$（TEXT）

使用了与CSS相同的对象定义语法以及一些特别易于使用的插件，如“：input”。对于CSS引用和JQuery特殊选择器语法检查，这里有一个很好的参考。这就是为什么我知道如何用一个非常简洁的语句来编写你感兴趣的东西。

你能为表单发布你的js代码吗？你需要向我们展示更多你的代码。尝试查找从哪里获取数据格式，可能是通过

$（“#formId”）.serialize（）

以及从哪里通过ajax将数据发送到处理数据的php文件。是的！那很好用。上面说我要到15岁才能投票。但是谢谢你！var inputs=document.getElementsByClassName（'ui-wizard-content'）；对于（var i=0；i$（'ui-wizard-content'）.each（function（）{$（this.removeAttr（“disabled”）；}）$(':input.ui-wizard-content').each(function() {$( this ).removeAttr("disabled");});

if(data.isLastStep){                                                                                    // if this is the last step...then
    $("#summaryContainer").empty();                                                                     // empty the container holding the 
    $.each(data.activatedSteps, function(i, id){                                                        // for each of the activated steps...do
        if(id === "summary") return;                                                                    // if it is the summary page then just return
        cache[id] = $("#" + id).find(".input");                                                         // else, find the div:s with class="input" and cache them with a key equal to the current step id
        cache[id].detach().appendTo('#summaryContainer').show().find(":input").removeAttr("disabled");  // detach the cached inputs and append them to the summary container, also show and enable them
    });
}

if(data.isLastStep){ 
    $("#summaryContainer").empty();
    $('.input :input').detach().appendTo('#summaryContainer').show().find(":input").removeAttr("disabled");
}