我有一个问题,我似乎无法通过我的方式。
首先,我有一个由专业人士建立的网站,我们不再与该公司建立工作关系。我现在自己管理网站。我有能力,但我绝不是一个有经验的Web开发人员。
背景:我们有一个申请程序,它使用呈现给最终用户的多页表格。表单分 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>
我还包含了下面表单的html:
<form name="appForm" id="appForm" action="submit-app-exec.php" method="post"
enctype="multipart/form-data" autocomplete="off" onSubmit="showProgressBar()">
<fieldset class="step" id="page_1">
<div class="input">
<?php include("add-company/step1.html"); ?>
</div>
</fieldset>
<fieldset class="step" id="page_2">
<div class="input">
<?php include("add-company/step2.html"); ?>
</div>
</fieldset>
<fieldset class="step" id="page_3">
<div class="input">
<?php include("add-company/step3.html"); ?>
</div>
</fieldset>
<fieldset class="step" id="page_4">
<div class="input">
<?php include("add-company/step4.html"); ?>
</div>
</fieldset>
<fieldset class="step" id="page_5">
<div class="input">
<?php include("add-company/step5.html"); ?>
</div>
</fieldset>
<fieldset class="step" id="page_6">
<div class="input">
<?php include("add-company/step6.html"); ?>
</div>
</fieldset>
<fieldset class="step" id="page_7">
<div class="input">
<?php include("add-company/step7.html"); ?>
</div>
</fieldset>
<fieldset class="step" id="summary" >
<span class="font_normal_07em_black">Summary page</span><br />
<p>Please verify your information below.</p>
<div id="summaryContainer"></div>
</fieldset>
<div id="wizardNavigation">
<button class="navigation_button" onclick="javascript:saveApp()">Save</button>
<input class="navigation_button" id="back" value="Back" type="reset" />
<input class="navigation_button" id="next" value="Next" type="submit" onclick="javascript:noSaveApp()" />
<div class="clearFix"></div>
</div>
加载页面时,每个字段集都有额外的类和样式属性:
class="step ui-formwizard-content ui-helper-reset ui-corner-all" style="display: none;"
在这个过程中,我可以用Firebug观看,并看到显示:none;循环播放并在与该字段集交互时更改为"阻止"。
问题:我们没有以任何方式构建用户来保存进度并在以后完成。我现在正在尝试这样做。我已经成功创建了"保存"按钮,该按钮触发了一个javascript来更改表单的操作,该脚本将数据发布到一个新的php文件中,该文件处理并将POST数据处理到MySQL中。但是,这有效,POST 仅传递当前查看的字段集中的数据,而不是 POST 所有数据。而且我无法弄清楚如何确保所有表单数据都已发布。任何指导或建议都会有所帮助。谢谢。
编辑:
我能够通过以下方式加载正确的页面:
$(function(){ $('#appForm').formwizard('show','" . $row["current_step"] . "'); });
这将加载正确的页面。现在的问题是,最后一步是一个摘要页面,其中显示了最终提交的所有输入元素。但是,它似乎只显示查看的页面中的元素,我很确定是数组"data.activeSteps"确定元素是否在最终摘要中被分配。你的代码会比我的更好地解决这个问题吗?再次感谢您对此的帮助。–
<input>
具有属性'disable'
的对象不会在 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");
从页面上的所有内容中,然后提交帖子/获取。
看起来以前的编码人员通过遍历页面上的所有数据并使其未在此处禁用来实现此目的。
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-wizard-content
告诉 JQuery 只查找该类的输入,然后.each
遍历在找到的对象上运行 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
});
}
跟
if(data.isLastStep){
$("#summaryContainer").empty();
$('.input :input').detach().appendTo('#summaryContainer').show().find(":input").removeAttr("disabled");
}
这主要是从以前的编码员所做的事情中借来的。他假设表单中的所有内容都会data.activatedSteps
,因为他创建的工作流程,但情况已不再如此。因此,您要么需要查看他将数据添加到data.activatedSteps
的位置,然后在重新加载时以相同的方式将保存的内容放在那里。或者只是使用我的行,忽略所有data
的东西,只是用类input
抓取对象内的每一个<input>
并将其添加到容器中。
注意:JQuery 的$(TEXT)
使用与 CSS 相同的对象定义语法,并有一些特殊的易用性添加,如":input"。对于我在这里谈论的CSS引用和JQuery特殊选择器语法的检查,这里有一个很好的参考。这就是我知道如何用一个非常紧凑的陈述来写出你感兴趣的一切的东西。