jQuery Smart Wizard 3.0 post all form fields in the wizard

Question

I'm using the vertical layout to display a form with 12 steps. when I hit finish only the first section is submitted.

here's the javascript code:

 $('#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();
 };

and the HTML/CF Code:

<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>

and here's what's being passed:

COURSE_NUMBER=ARH4010T&POC=&POE=&AFNorth=0&IB_Course=0

The wizard code sets all but the currently visible div to display:none, which should mean that the form fields don't pass, however in the validation demo all the fields pass, even though they're display: none

What am I missing?

score 1 · Answer 1 · answered Mar 18 '15 at 14:37

I solved this as I was posting it (sort of). There were some errors in HTML placement. I moved the upper form tag above the first which balanced out the lower properly . I also removed some unneeded span tags.

I also reduced the javascript to this:

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

and now it's passing all the fields back . The cancel button is something that I added to the plugin. If anyone wants to see what I did I can post the code changes in this thread.

jQuery Smart Wizard 3.0 post all form fields in the wizard

1 Answers1