Search code examples
c#jqueryasp.net-mvc-2formwizard

jquery formwizard last step not showing


is there any reason that my final step i call confirmation isn't showing in the formwizard?

        <form id="wizardForm" action="" method="post">
        <div id="fieldWrapper">

            <div class="step" id="first">
                <span class="font_normal_07em_black step_title">Site Information</span><br />
                <label for="Title">Title</label>
                <input id="Title" class="input_field_12em required" type="text" />
                <label for="Description">Description</label>
                <input id="Description" class="input_field_12em required" type="text" />
                <label for="UrlName">Url Name</label>
            </div>

            <div class="step" id="ownerInfo">
                <span class="font_normal_07em_black step_title">Site Owner</span>
                <label for="PrimaryOwner">Primary Owner</label>
                <input id="PrimaryOwner" class="input_field_12em required" type="text" />
                <label for="SecondaryOwner">Secondary Owner (nt id)</label>
                <input id="SecondaryOwner" class="input_field_12em required" type="text" />
            </div>

            <div class="step" id="siteAccess">
                <span class="font_normal_07em_black step_title">Site Access</span>
                <label for="I">Public or private info <br />
                Will private information be stored in this space?</label>
                <input id="iYes" name="I" type="radio" value="Yes" />Yes<br />
                <input id="iNo" name="I" type="radio" value="No" />No
                <hr />
                <label for="T">Will T Information be stored on this space?</label>
                <input id="TYes" name="T" type="radio" value="Yes" onclick="ToggleT()" />Yes<br />
                <input id="TNo" name="T" type="radio" value="No" onclick="ToggleT()" />No
                <div id="tAcknowledgeContainer" class="hidden_contain">
                    <input type="checkbox" id="tCheckbox" /><span class="checkbox_label">I acknowledge </span>
                </div>
                <hr />
                <label for="C">Will space need to Control content?</label>
                <input id="cYes" name="C" type="radio" value="Yes" onclick="ToggleC()" />Yes<br />
                <input id="cNo" name="C" type="radio" value="No" onclick="ToggleC()" />No
                <div id="cAcknowledgeContainer" class="hidden_contain">
                    <input type="checkbox" id="cCheckbox" />
                    <span class="checkbox_label">I agree </span>
                </div>
                <hr />
                <label for="F">Is Other User Access Required?</label>
                <input id="FYes" name="F" type="radio" value="Yes" onclick="ToggleF()" />Yes<br />
                <input id="FNo" name="F" type="radio" value="No" onclick="ToggleF()" />No
                <div id="fPleaseNoteContainer" class="hidden_contain">
                    <span class="please_note"><strong>Please Note</strong><br /> 
                    </span>
                </div>
                <hr />
                <label for="N">Non Employee(s)?</label>
                <input id="NYes" name="N" type="radio" value="Yes" onclick="ToggleN()" />Yes<br />
                <input id="NNo" name="N" type="radio" value="No" onclick="ToggleN()" />No
                <div id="nAcknowledgeContainer" class="hidden_contain">
                    <input type="checkbox" id="nCheckbox" />
                    <span class="checkbox_label">
                        I agree 
                    </span>
                </div>
            </div>

            <div class="step" id="siteSharing">
                <span class="font_normal_07em_black step_title">Site Sharing</span>
                        <div class="side_by_side_container">
                            <div class="left_container">
                                <input id="SharingRestrictionN2S" name="SharingRestriction" type="radio" value="N2S" />
                                <span class="generic_label">Public</span><br />
                            </div>
                            <div class="right_container">
                                <input id="SharingRestrictionN2K" name="SharingRestriction" type="radio" value="N2K" />
                                <span class="generic_label">Private</span><br />
                            </div>
                        </div>
            </div>

            <div class="step" id="agreement">
                <span class="font_normal_07em_black step_title">Agreements</span>
                <div>
                    <br />
                    <div>Business Agreement</div>
                    <iframe id="bFrame" class="generic_iframe" src="<%= ConfigurationManager.AppSettings["businessUrl"] %>"></iframe>
                    <br /><br />
                    <hr />
                    <br />
                    <div>Service Agreement</div>
                    <iframe id="sFrame" class="generic_iframe" src="<%= ConfigurationManager.AppSettings["sericeUrl"] %>"></iframe>
                    <br /><br />
                    <hr />
                    <br />
                    I agree 
                </div>
                <br />
                <input id="sbAggrement" class="required" type="checkbox" />
                <span class="checkbox_label">
                    i agree
                </span>
            </div>

            <div id="final" class="step submit_step">
                <span class="font_normal_07em_black step_title">Confirmation</span>
                <input type="text" name="temp1" />
            </div>
        </div>
        <br />

        <hr class="form_divider" />

        <div id="wizardNavigation">
            <input class="navigation_button" value="Back" type="reset" />
            <input class="navigation_button" value="Next" type="submit" />
        </div>
    </form>

seems like it submits on the prior step and doesn't even hit this step. i thought you had to include the class step and submit_step because when i remove "step" it doesn't add this as another wizard step. if displays it on the bottom of every step.

also on the final submit, has anyone done anything where they call ajax to perform the submit so that if an error occurs the user doesn't leave the page and still has all their data to attempt again?

i am using c#, mvc2 and testing with Firefox browser


Solution

  • i found an issue. it seems that the required class on the checkbox before the final confirmation step was throwing a javascript error.

                    <input id="sbAggrement" class="required" type="checkbox" />
    

    i removed the required class and the final step is displayed when the next button is clicked. Now onto the next problem, why is the required class on the checkbox throwing a javascript error.......

    instead of having the required class on the input, I added the checkbox to the validationOptions and it works perfectly now