创建用户向导第2步javascript没有响应

时间:2013-06-01 02:42:25

标签: javascript asp.net radio-button createuserwizard

我有一个asp.net 4.5创建用户表单,其中前两个步骤使用TemplatedWizardStep布局。
在第2步中,我有一些javascript应该对单选按钮单击操作做出反应。 我最初在步骤1中有无线电操作,并且javascript按预期工作。 自从我将其移至第2步后,它就不再有效了。 我去了firebug并在脚本上设置了一个监视器,但是脚本在步骤2中不可用。在页面源视图中,没有包含步骤2的控件,只包括步骤1中的控件。当我检查时,我在第2步页面源视图。 有谁知道如何使这项工作符合预期?

由于

创建用户向导

        <asp:CreateUserWizard runat="server" ID="RegisterUser" LoginCreatedUser="false" ViewStateMode="Disabled"
            OnCreatedUser="RegisterUser_CreatedUser" ActiveStepIndex="0"
            AnswerRequiredErrorMessage="Please answer selected question"
            DuplicateUserNameErrorMessage="The user name is already in the system. Enter another user name.">

            <LayoutTemplate>
                <asp:PlaceHolder runat="server" ID="wizardStepPlaceholder" />
                <asp:PlaceHolder runat="server" ID="navigationPlaceholder" />
            </LayoutTemplate>

            <WizardSteps>
                <asp:TemplatedWizardStep ID="wzdStep1" runat="server" StepType="Start">
                    <ContentTemplate>
                        <asp:UpdatePanel ID="UpdatePanelStep1" UpdateMode="Conditional" runat="server">
                            <ContentTemplate>

                                <fieldset>

                                    <ul>
                                        <li>
                                            <asp:Label ID="lblFullName" runat="server" AssociatedControlID="txtFullName">Full name</asp:Label>
                                            <input runat="server" data-rule-minlength="2" data-rule-required="true" class="controltext" type="text" placeholder="Enter Full Name" id="txtFullName" />
                                        </li>
                                        <li>
                                            <asp:Label ID="lblCountry" runat="server" AssociatedControlID="ddCountry">Country</asp:Label>
                                            <asp:DropDownList ID="ddCountry" AppendDataBoundItems="true" AutoPostBack="true" DataSourceID="lnqCountry" DataTextField="CntryName" DataValueField="CntryID" CssClass="controltext" runat="server">
                                                <asp:ListItem Value="-1">---Select Country---</asp:ListItem>
                                            </asp:DropDownList>

                                            <asp:LinqDataSource ID="lnqCountry" runat="server"
                                                ContextTypeName="ClientStudio.SalonDataClassesDataContext" OrderBy="CntryName"
                                                TableName="CntrysLUs">
                                            </asp:LinqDataSource>
                                        </li>
                                        <li>
                                            <asp:Label ID="lblStates" runat="server" AssociatedControlID="ddStates">State</asp:Label>
                                            <div class="input-append controltext" id="divStateSelect" style="display: inline-block">
                                                <asp:DropDownList ID="ddStates" data-rule-required="true" AutoPostBack="false" EnableViewState="true" AppendDataBoundItems="true" DataSourceID="lnqStates" DataTextField="StateName" DataValueField="StateID" CssClass="controltext" runat="server">
                                                    <asp:ListItem Value="-1">---Select State---</asp:ListItem>
                                                </asp:DropDownList>
                                                <button class="button button-basic" id="btnAddState" onclick="addState();" type="button">
                                                    Add
                                                </button>
                                            </div>
                                            <div class="input-append input-prepend" id="divStateAdd" style="display: none">
                                                <span class="add-on">
                                                    <i class="icon-edit"></i>
                                                </span>
                                                <input class="controltext" runat="server" id="txtStateName" type="text" placeholder="Enter State Name" />
                                                <button class="button button-basic" runat="server" id="btnSaveState" onclick="saveState">
                                                    Save!
                                                </button>
                                                <button class="button button-basic" onclick="clearState();" id="btnClearState" type="button">
                                                    Clear
                                                </button>
                                            </div>
                                            <asp:LinqDataSource ID="lnqStates" runat="server"
                                                ContextTypeName="ClientStudio.SalonDataClassesDataContext" OrderBy="StateName"
                                                TableName="StatesLUs" Where="CntryID == @CntryID"
                                                Select="new (StateID, StateName, CntryID)">
                                                <WhereParameters>
                                                    <asp:ControlParameter ControlID="ddCountry" Name="CntryID"
                                                        PropertyName="SelectedValue" Type="Int32" />
                                                </WhereParameters>
                                            </asp:LinqDataSource>
                                        </li>
                                        <li>
                                            <asp:Label ID="lblCity" runat="server" AssociatedControlID="txtCity">City Name</asp:Label>
                                            <input runat="server" data-rule-minlength="2" data-rule-required="true" class="controltext" type="text" placeholder="Enter City Name" id="txtCity" />
                                        </li>
                                    </ul>
                                </fieldset>
                            </ContentTemplate>
                        </asp:UpdatePanel>
                    </ContentTemplate>
                    <CustomNavigationTemplate>
                        <div class="pull-right">
                            <asp:Button ID="Button1" runat="server" CssClass="btn btn-success btn-large" CommandName="MoveNext" Text="Next" />
                        </div>
                    </CustomNavigationTemplate>
                </asp:TemplatedWizardStep>
                <asp:TemplatedWizardStep ID="wzdStep2" StepType="Auto">
                    <ContentTemplate>
                        <fieldset>
                            <ul>
                                <li>
                                    <asp:Label ID="lblStylist" runat="server" AssociatedControlID="RadioButtonList1">Do you currently have a stylist or stylists?</asp:Label>

                                    <asp:RadioButtonList ID="RadioButtonList1" AutoPostBack="false" onclick="javascript:radio(this);" CssClass="controltext"
                                        RepeatLayout="Table" RepeatDirection="Vertical" RepeatColumns="1"
                                        runat="server">
                                        <asp:ListItem Value="1" Selected="True"> <i> Yes, I have a stylist(s) I see on a regular basis</i></asp:ListItem>
                                        <asp:ListItem Value="0"> <i> No, I am looking for a new stylist</i></asp:ListItem>
                                    </asp:RadioButtonList>
                                </li>
                                <li id="liSearch" style="display: block">
                                    <asp:Label ID="Label1" runat="server">Find by Salon or Stylist Name</asp:Label>
                                    <div class="clear"></div>
                                    <br />
                                    <div class="input-append input-prepend">
                                        <span class="add-on">
                                            <i class="icon-search"></i>
                                        </span>
                                        <input class="controltext" type="text" id="FindBySalon" placeholder="Enter Salon Name..."></input>
                                        <button class="button button-basic" onclick="findBySalon();" id="btnFindBySalon" type="button">
                                            Find by Salon!
                                        </button>
                                    </div>
                                    <div class="clear"></div>
                                    <div class="input-append input-prepend">
                                        <span class="add-on">
                                            <i class="icon-search"></i>
                                        </span>
                                        <input class="controltext" type="text" id="FindByStylist" placeholder="Enter Stylists Name..."></input>
                                        <button class="button button-basic" onclick="findByStylist();" id="btnFindByStylist" type="button">
                                            Find by Stylists Name!
                                        </button>
                                    </div>
                                </li>
                                <li id="liResults" style="display: none">
                                    <asp:Label ID="lblResults" runat="server" AssociatedControlID="ddResults">Search Results</asp:Label>
                                    <asp:DropDownList ID="ddResults" AutoPostBack="true" OnSelectedIndexChanged="ddResults_SelectedIndexChanged" CssClass="controltext" DataValueField="StylistID" DataTextField="Results" runat="server"></asp:DropDownList>
                                </li>
                                <li id="liSelf" style="display: none">
                                    <asp:Label ID="Label2" runat="server" AssociatedControlID="ddSelf">Is this you?</asp:Label>
                                    <asp:DropDownList ID="ddSelf" CssClass="controltext" DataValueField="CustomerID" DataTextField="Results" runat="server"></asp:DropDownList>
                                </li>
                            </ul>
                        </fieldset>

                    </ContentTemplate>
                    <CustomNavigationTemplate>
                        <div class="pull-right">
                            <asp:Button ID="Button2" runat="server" CssClass="btn btn-success btn-large" CommandName="MovePrevious" Text="Previous" />
                            <asp:Button ID="Button3" runat="server" CssClass="btn btn-success btn-large" CommandName="MoveNext" Text="Next" />
                        </div>
                    </CustomNavigationTemplate>
                </asp:TemplatedWizardStep>
                <asp:CreateUserWizardStep runat="server" ID="RegisterUserWizardStep">
                    <ContentTemplate>
                        <p class="message-info">
                            Passwords are required to be a minimum of <%: Membership.MinRequiredPasswordLength %> characters in length.
                        </p>

                        <p class="validation-summary-errors">
                            <asp:Literal runat="server" ID="ErrorMessage" />
                        </p>

                        <fieldset>

                            <ol>
                                <li>
                                    <asp:Label runat="server" AssociatedControlID="UserName">User name</asp:Label>
                                    <asp:TextBox runat="server" ID="UserName" />
                                    <asp:RequiredFieldValidator runat="server" ControlToValidate="UserName"
                                        CssClass="field-validation-error" ErrorMessage="The user name field is required." />
                                </li>
                                <li>
                                    <asp:Label runat="server" AssociatedControlID="Email">Email address</asp:Label>
                                    <asp:TextBox runat="server" ID="Email" TextMode="Email" />
                                    <asp:RequiredFieldValidator runat="server" ControlToValidate="Email"
                                        CssClass="field-validation-error" ErrorMessage="The email address field is required." />
                                </li>
                                <li>
                                    <asp:Label runat="server" AssociatedControlID="Password">Password</asp:Label>
                                    <asp:TextBox runat="server" ID="Password" TextMode="Password" />
                                    <asp:RequiredFieldValidator runat="server" ControlToValidate="Password"
                                        CssClass="field-validation-error" ErrorMessage="The password field is required." />
                                </li>
                                <li>
                                    <asp:Label runat="server" AssociatedControlID="ConfirmPassword">Confirm password</asp:Label>
                                    <asp:TextBox runat="server" ID="ConfirmPassword" TextMode="Password" />
                                    <asp:RequiredFieldValidator runat="server" ControlToValidate="ConfirmPassword"
                                        CssClass="field-validation-error" Display="Dynamic" ErrorMessage="The confirm password field is required." />
                                    <asp:CompareValidator runat="server" ControlToCompare="Password" ControlToValidate="ConfirmPassword"
                                        CssClass="field-validation-error" Display="Dynamic" ErrorMessage="The password and confirmation password do not match." />
                                </li>
                                <li>
                                    <asp:Label ID="lblSecurityQ" runat="server" AssociatedControlID="Question">Select Security Question</asp:Label>
                                    <asp:DropDownList ID="Question" CssClass="controltext" runat="server">
                                        <asp:ListItem>What is your mother&#39;s maiden name?</asp:ListItem>
                                        <asp:ListItem>What city were you born in?</asp:ListItem>
                                        <asp:ListItem>What city was your mother born in?</asp:ListItem>
                                        <asp:ListItem>What is your favorite sport?</asp:ListItem>
                                        <asp:ListItem>What is your favorite pets name?</asp:ListItem>
                                        <asp:ListItem>What grade school did you graduate from?</asp:ListItem>
                                        <asp:ListItem>What is your favorite meal?</asp:ListItem>
                                        <asp:ListItem>What is your favorite soap?</asp:ListItem>
                                    </asp:DropDownList>
                                </li>
                                <li>
                                    <asp:Label ID="lblSecurityAns" runat="server" AssociatedControlID="Answer">Security Answer</asp:Label>
                                    <asp:TextBox ID="Answer" CssClass="controltext" runat="server"></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="Answer"
                                        CssClass="field-validation-error" Display="Dynamic" ErrorMessage="Please enter the answer to selected question above." />
                                </li>
                            </ol>
                        </fieldset>
                    </ContentTemplate>
                    <CustomNavigationTemplate>
                        <div class="pull-right">
                            <asp:Button ID="Button4" runat="server" CssClass="btn btn-success btn-large" CommandName="MovePrevious" Text="Previous" />
                            <asp:Button ID="Button5" runat="server" CssClass="btn btn-success btn-large" CommandName="MoveNext" Text="Next" />
                        </div>
                    </CustomNavigationTemplate>
                </asp:CreateUserWizardStep>
                <asp:CompleteWizardStep ID="wzdComplete">
                    <ContentTemplate>
                        <p>
                            Your account has been created, but before you can login you must first verify your email address.
                        </p>
                        <p>
                            A message has been sent to the email address you specified. Please check your email inbox and follow the instructions in that email to verify your account.
                        </p>
                        <br />
                    </ContentTemplate>
                    <CustomNavigationTemplate>
                        <asp:Button ID="Button6" runat="server" CssClass="btn btn-success btn-large" CommandName="MovePrevious" Text="Previous" />
                        <asp:Button ID="Button7" runat="server" CssClass="btn btn-danger btn-large" CommandName="Cancel" Text="Cancel" />
                        <asp:Button ID="Button8" runat="server" CssClass="btn btn-primary btn-large" CommandName="MoveComplete" Text="Next" />
                    </CustomNavigationTemplate>
                </asp:CompleteWizardStep>
            </WizardSteps>
        </asp:CreateUserWizard>

的JavaScript

<script type="text/javascript">


    function radio(cnt) {
        var radioButtons = document.getElementById("ContentPlaceHolder1_RegisterUser_ctl05_RadioButtonList1");
        var inputs = radioButtons.getElementsByTagName("input");
        var li = document.getElementById("liSearch");
        var liResults = document.getElementById("liResults");
        var liSelf = document.getElementById("liSelf");

        if (inputs[1].checked) {

            li.style.display = "none";
            liResults.style.display = "none";
            liSelf.style.display = "none";

        } else {

            li.style.display = "block";
            liResults.style.display = "block";
            liSelf.style.display = "block";
        }

    }
</script>

1 个答案:

答案 0 :(得分:1)

我想你手动设置了id

ContentPlaceHolder1_RegisterUser_ctl05_RadioButtonList1

并且当您将其移至步骤2时,该ID会发生变化。

将其更改为动态获取ID为:

var radioButtons = document.getElementById("<%=RadioButtonList1.ClientID%>");

它会起作用。