jQuery Smart Wizard 3.0在向导中发布所有表单字段

时间：2015-03-18 13:59:21

标签： jquery smart-wizard

我使用垂直布局显示包含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&amp;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，这意味着表单字段不会通过，但是在验证演示中所有字段都会通过，即使它们显示：无

我错过了什么？

1 个答案:

答案 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();
};
})

现在它将所有领域都归还了。取消按钮是我添加到插件的东西。如果有人想看看我做了什么，我可以在这个帖子中发布代码更改。

相关问题
最新问题