我有一个问题,我似乎无法解决。
首先,我有一个由专业人员构建的网站,但我们不再与该公司保持工作关系。现在我正在自己管理网站。我有能力,但我绝不是一名经验丰富的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观察,看到当与该fieldset交互时,display:none;会循环并更改为“block”。
问题是:我们没有以任何方式建立用户保存进度并稍后完成的方法。我现在正在尝试做到这一点。我已经成功创建了“保存”按钮,它触发一个javascript来更改表单的操作,将数据POST到一个新的php文件中,处理并将POST数据转换为MySQL。这部分工作正常。但是,POST只传递当前查看的fieldset的数据,而不是POST所有数据。我无法弄清楚如何确保POST所有表单数据。任何指导或建议都会有所帮助。谢谢。
编辑:
我能够用以下方法加载正确的页面:
$(function(){ $('#appForm').formwizard('show','" . $row["current_step"] . "'); });
这将加载正确的页面。现在的问题是,最后一步是显示所有输入元素以进行最终提交的摘要页面。但是,它似乎只显示从已查看的页面中获取的元素,我非常确定是数组“data.activatedSteps”决定了元素是否在最终摘要中显示。您的代码是否比我的更好地解决了这个问题?再次感谢您的帮助。–
$('#formId').serialize()
获取数据,并且找到将数据通过ajax发送到处理数据的php文件的位置。 - Cristian Bitoi