我使用垂直布局显示包含12个步骤的表单。当我点击完成时,只提交了第一部分。
这里是javascript代码:
$('#wizard').smartWizard({
selected:0,
enableAllSteps: true, // Enable/Disable all steps on first load
transitionEffect: 'fade', // Effect on navigation, none/fade/slide/slideleft
contentCache:true, // cache step contents, if false content is fetched always from ajax url
cycleSteps: true, // cycle step navigation
enableFinishButton: true, // makes finish button enabled always
onFinish: onFinishCallback,
onCancel: onCancelCallback,
errorSteps:[], // array of step numbers to highlighting as error steps
labelFinish:'Finish', // label for Finish button
labelCancel:'Cancel'
})
function onFinishCallback(){
/*$("#classEditForm").submit();*/
$.ajax({
type:'POST',
url: 'index.cfm?action=addClassData&nolayout',
data: $('#classEditForm').serialize(),
cache: false,
success: function(){
alert("successful post");
/*$("#editPage").jqmHide();*/
},
error: function(){
}
});
}
function onCancelCallback(){
$("#editPage").jqmHide();
};
和HTML / CF代码:
<cfoutput query="variables.classData">
<table id="classInfo">
<tr>
<th>Course Number</th>
<th>Course Name</th>
<th></th>
</tr>
<tr>
<td valign="middle" id="cNum" class="classData">#CRS_COURSE_NUMBER#</td>
<td>#CRS_COURSE_DESCRIPTION#</td>
<td align="right"></td>
</tr>
</table>
</cfoutput>
<div id="wizard" class="swMain">
<ul>
<li>Administrative Data</li>
<li>About the Program</li>
<li>Activities</li>
<li>Concepts</li>
<li>Lab Requirements</li>
<li>Notes</li>
<li>Objectives</li>
<li>Philosophy</li>
<li>Preparation</li>
<li>Software</li>
<li>Techniques</li>
<li>File Uploads</li>
</ul>
<cfoutput query="variables.classData">
<div id="step-1">
<form id="classEditForm" action="index.cfm? action=addClassData&nolayout" method="post">
<input type="hidden" name="COURSE_NUMBER" id="course_number" value="#CRS_COURSE_NUMBER#"/>
<fieldset>
<legend class="StepTitle">Administrative Data</legend>
<label for="POC" id="poc_label" style="margin-right: 38px;">Point of Contact</label>
<input type="text" id="POC" name="POC" value="#POC_TITLE#" class="txtBox" style="margin-bottom: 3px;">
<label for="POE" id="poe_label">Point of Contact Email</label>
<input type="text" id="POE" name="POE" value="#POC_EMAIL#" class="txtBox">
<div>
<label>AFNorth Only: </label>
<div id="AFNorth">
<cfswitch expression="#AFNORTH#">
<cfcase value="1">
<label for="AFNorth_Yes" class="rbLabel">Yes</label>
<input type="radio" id="AFNorth_Yes" name="AFNorth" checked="checked" value="1">
<label for="AFNorth_No" class="rbLabel">No</label>
<input type="radio" id="AFNorth_No" name="AFNorth" value="0">
</cfcase>
<cfcase value="0">
<label for="AFNorth_Yes" class="rbLabel">Yes</label>
<input type="radio" id="AFNorth_Yes" name="AFNorth" value="1">
<label for="AFNorth_No" class="rbLabel">No</label>
<input type="radio" id="AFNorth_No" name="AFNorth" checked="checked" value="0">
</cfcase>
<cfdefaultcase>
<label for="AFNorth_Yes" class="rbLabel">Yes</label>
<input type="radio" id="AFNorth_Yes" name="AFNorth" value="1">
<label for="AFNorth_No" class="rbLabel">No</label>
<input type="radio" id="AFNorth_No" name="AFNorth" checked="checked" value="0">
</cfdefaultcase>
</cfswitch>
</div>
</div>
<div>
<label>International Baccalaureate</label>
<div class="intlBac">
<cfswitch expression="#IB_COURSE#">
<cfcase value="1">
<label for="IB_Yes" class="rbLabel">Yes</label>
<input type="radio" id="IB_Yes" name="IB_Course" checked="checked" value="1">
<label for="IB_No" class="rbLabel">No</label>
<input type="radio" id="IB_No" name="IB_Course" value="0">
</cfcase>
<cfcase value="0">
<label for="IB_Yes" class="rbLabel">Yes</label>
<input type="radio" id="IB_Yes" name="IB_Course" value="1">
<label for="IB_No" class="rbLabel">No</label>
<input type="radio" id="IB_No" name="IB_Course" checked="checked" value="0">
</cfcase>
<cfdefaultcase>
<label for="IB_Yes" class="rbLabel">Yes</label>
<input type="radio" id="IB_Yes" name="IB_Course" value="1">
<label for="IB_No" class="rbLabel">No</label>
<input type="radio" id="IB_No" name="IB_Course" checked="checked" value="0">
</cfdefaultcase>
</cfswitch>
</div>
</div>
</fieldset>
</div>
<div id="step-2">
<fieldset>
<div id="about">
<label for="abt" class="topLabel StepTitle">About the Program</label>
<textarea id="abt" name="abt" class="classEditText">#ABOUT_PROGRAM#</textarea>
</div>
</fieldset>
</div>
<div id="step-3">
<fieldset>
<div id="activities">
<label for="act" class="topLabel StepTitle">Activities</label>
<textarea id="act" name="act" class="classEditText">#ACTIVITIES#</textarea>
</div>
</fieldset>
</div>
<div id="step-4">
<fieldset>
<div id="concepts">
<label for="con" class="topLabel StepTitle">Concepts</label>
<textarea id="con" name="con" class="classEditText">#CONCEPTS#</textarea>
</div>
</fieldset>
</div>
<div id="step-5">
<fieldset>
<div id="labs">
<label for="lab" class="topLabel StepTitle">Lab Requirements</label>
<textarea id="lab" name="lab" class="classEditText">#LAB_REQ#</textarea>
</div>
<div id="step-6">
<fieldset>
<div id="notes">
<label for="nts" class="topLabel StepTitle">Notes</label>
<textarea id="nts" name="nts" class="classEditText">#NOTES#</textarea>
</div>
</fieldset>
</div>
<div id="step-7">
<fieldset>
<div id="objectives">
<label for="obj" class="topLabel StepTitle">Objectives</label>
<textarea id="obj" name="obj" class="classEditText">#OBJECTIVES#</textarea>
</div>
</fieldset>
</div>
<div id="step-8">
<fieldset>
<div id="philosophy">
<label for="phi" class="topLabel StepTitle">Philosphy</label>
<textarea id="phi" name="phi" class="classEditText">#PHILOSOPHY#</textarea>
</div>
</fieldset>
</div>
<div id="step-9">
<fieldset>
<div id="preparation">
<label for="prep" class="topLabel StepTitle">Preparation</label>
<textarea id="prep" name="prep" class="classEditText">#PREPARATION#</textarea>
</div>
</fieldset>
</div>
<div id="step-10">
<fieldset>
<div id="software">
<label for="soft" class="topLabel StepTitle">Software</label>
<textarea id="soft" name="soft" class="classEditText">#SOFTWARE#</textarea>
</div>
</fieldset>
</div>
<div id="step-11">
<fieldset>
<div id="techniques">
<label for="tech" class="topLabel StepTitle">Techniques</label>
<textarea id="tech" name="tech" class="classEditText">#TECHNIQUES#</textarea>
</div>
</fieldset>
</div>
<div id="step-12">
<fieldset>
<div id="files">
<legend class=" StepTitle">File Uploads</legend>
<label for="CCD_1"> Competency Document 1</label>
<input type="text" name="CCD_NAME_1" id="CCD_NAME_1" value="#COMPETENCYDOCLINKNAME01#"/>
<input type="file" name="CCD_1" id="CCD_1" value="#COMPETENCYDOC01#"/>
<label for="CCD_2"> Competency Document 2</label>
<label for="CCD_3"> Competency Document 3</label>
<input type="text" name="CCD_NAME_3" id="CCD_NAME_3" value="#COMPETENCYDOCLINKNAME01#"/>
<input type="file" name="CCD_3" id="CCD_3" value="#COMPETENCYDOC01#"/>
</div>
</fieldset>
</div>
</cfoutput>
</form>
</div>
以及通过的内容:
COURSE_NUMBER=ARH4010T&POC=&POE=&AFNorth=0&IB_Course=0
向导代码将除当前可见div之外的所有div设置为:none,这意味着表单字段不会通过,但是在验证演示中所有字段都会通过,即使它们显示:无
我错过了什么?
答案 0 :(得分:0)
我解决了这个问题,因为我发布了它(有点)。 HTML展示位置存在一些错误。我将上部标签移动到第一个上方,正确地平衡了下部标签。我还删除了一些不需要的span标签。
我还将javascript缩减为:
$(document).ready(function(){
$('#wizard').smartWizard({
transitionEffect: 'fade', // Effect on navigation, none/fade/slide/slideleft
enableFinishButton: true, // makes finish button enabled always,
contentCache:true,
onFinish: onFinishCallback,
onCancel: onCancelCallback,
labelFinish:'Finish', // label for Finish button
labelCancel:'Cancel'
})
function onFinishCallback(){
$.ajax({
type:'POST',
url: 'index.cfm?action=addClassData&nolayout',
data: $('#classEditForm').serialize(),
cache: false,
success: function(){
alert("successful post");
/*$("#editPage").jqmHide();*/
}
});
}
function onCancelCallback(){
$("#editPage").jqmHide();
};
})
现在它将所有领域都归还了。取消按钮是我添加到插件的东西。如果有人想看看我做了什么,我可以在这个帖子中发布代码更改。