Question

我有一个dropdownlist控件ddlAffilation，一个面板pnlForms，一个面板Complete，一个按钮Submit，一个按钮Return。

我在下拉列表中有一个验证控件。

这是我的jquery代码

<script type="text/javascript">
$(document).ready(function () {
    $("#<%= Submit.ClientID %>").click(function () {
        $("#<%= pnlForms.ClientID %>").fadeOut('slow');
        $("#Complete").delay(800).fadeIn('slow');

    });
    $("#<%= Return.ClientID %>").click(function () {
        $("#Complete").fadeOut('slow');
        $("#<%= pnlForms.ClientID %>").delay(800).fadeIn('slow');
    });
});
</script>

我有两个问题： 1）使用这个jQuery代码，只有在我没有在下拉列表框中选择任何值时，我才能来回（淡出pnlForms，在点击提交时淡入完成，反之亦然，当点击返回时）。如果我在下拉列表中选择任何值，则“返回”按钮不起作用。

2）jquery代码绕过.net服务器验证控件。如果没有从下拉列表中选择任何值，我需要代码不做任何事情。我试过了

var isValid = true;
if ($("#<%= ddlAffilation.ClientID %>").val() == "") {
    isValid = false;
    return false;
}

if (isValid == true) {
...

但它不起作用。最好的方法是什么？

谢谢，

=============================================== ===================================

我无法为自己的问题添加答案，所以我在这里回复约翰：

谢谢约翰。我有这样的代码，它解决了问题2。

<script type="text/javascript">
    $(document).ready(function () {
        $("#<%= Submit.ClientID %>").click(function (e) {
            if (IsValid() == false) {
                e.preventDefault();
                return false;
            }
            else {
                $("#<%= pnlForms.ClientID %>").fadeOut('slow');
                $("#Complete").delay(800).fadeIn('slow');
            }
        }); 
        $("#<%= Return.ClientID %>").click(function () {
            alert('blah2');
            $("#Complete").fadeOut('slow');
            $("#<%= pnlForms.ClientID %>").delay(800).fadeIn('slow');
        });
        function IsValid() {
            // Add any other validation in here
            if ($("#<%= ddlAffilation.ClientID %>").val() == "") {
                return false;
            }
            return true;
        }
    });
</script>

然而，问题1仍然存在。让我澄清一下。我有一些文本框，一个下拉列表和一个提交按钮来收集用户的反馈。他们都在面板pnlForms中。

除了下拉列表外，所有控件都可以为空。我们使用您的代码和服务器验证控件来处理这个问题。

当用户单击提交按钮时，我希望pnlForms为fadeOut，并将名为pnlComplete的隐藏面板设置为fadeIn。 pnlComplete有一个文本说感谢反馈和一个名为Return的按钮，让用户发送另一个反馈。

当用户点击“返回”按钮时，会发生相反的情况。 pnlComplete fadeOut和pnlForms fadeIn。

“提交”按钮效果很好，但“返回”按钮根本不起作用。我在Return.click中设置了一些alert（）（函数但它没有命中。

有什么想法吗？

这是整个页面的代码。

<%@ Page Title="" Language="C#" MasterPageFile="~/Master.master" 
    AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="content" runat="Server">
        <asp:UpdatePanel ID="pnlForms" runat="server">
            <ContentTemplate>
                <fieldset>
                    <legend>Your Information</legend>
                    <ol>
                        <li>
                            <label for="ctl00_content_name">
                                Your Name:</label>
                            <asp:TextBox ID="Name" runat="server" Width="150px"></asp:TextBox>
                            <em class="optional">Optional </em></li>
                        <li>
                            <label for="ctl00_content_status">
                                Your Affiliation:*</label>
                            <asp:DropDownList ID="ddlAffilation" runat="server" Width="155px">
                                <asp:ListItem Text="--Select One--" Value="" Selected="True" />
                                <asp:ListItem>F</asp:ListItem>
                                <asp:ListItem>S</asp:ListItem>
                                <asp:ListItem>T</asp:ListItem>
                            </asp:DropDownList>
                            <em class="required">Required
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage=" - Please select your affiliation"
                                    ControlToValidate="ddlAffilation" SetFocusOnError="True" ForeColor=""></asp:RequiredFieldValidator>
                            </em></li>
                    </ol>
                </fieldset>
                <div style="text-align: center;">
                    <asp:Button ID="Submit" runat="server" Text="Submit" OnClick="submit_Click" /></div>
            </ContentTemplate>
        </asp:UpdatePanel>
    <div id="Complete" style="display: none;">
        <asp:UpdatePanel ID="pnlComplete" runat="server">
            <ContentTemplate>               
                    <p>Thank you</p>
                <div style="text-align: center;">
                    <asp:Button ID="Return" runat="server" Text="Return" /></div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</asp:Content>
<asp:Content ID="Content3" runat="server" ContentPlaceHolderID="cpClientScript">
    <script type="text/javascript">
        $(document).ready(function () {
            $("#<%= Submit.ClientID %>").click(function (e) {
                if (IsValid() == false) {
                    e.preventDefault();
                    return false;
                }
                else {
                    $("#<%= pnlForms.ClientID %>").fadeOut('slow');
                    $("#Complete").delay(800).fadeIn('slow');
                }
            });
            $("#<%= Return.ClientID %>").click(function () {
                $("#Complete").fadeOut('slow');
                $("#<%= pnlForms.ClientID %>").delay(1000).fadeIn('slow');
            });
            function IsValid() {
                // Add any other validation in here
                if ($("#<%= ddlAffilation.ClientID %>").val() == "") {
                    return false;
                }
                return true;
            }
        });
    </script>
</asp:Content>

Answer 1

我不确定我是否正确阅读了您的问题，但如果您的问题是您不希望jquery继续触发并允许表单提交，如果下拉列表为空，请执行以下操作：

不是将.click事件附加到您的按钮，而是将.submit事件附加到您的表单。然后，如果无效，则需要使用e.PreventDefault()来停止主提交执行

例如：

$("#FORMNAME").submit(function(e) {
    if (IsValid() == false) {
        e.preventDefault();
        return false;
    }
    // Submitting form...
}


function IsValid() {
    // Add any other validation in here
    if ($("#<%= ddlAffilation.ClientID %>").val() == "") {
        return false;
    }
    return true;
}

此外，您应该始终与客户端验证一起进行服务器验证..否则所有人必须做的就是直接提交/绕过您的javascript检查

编辑您的修改：返回按钮是动态创建还是在页面加载时？如果它是动态的，它可能永远不会被分配到你的jquery中，因为它在运行时不存在。

以下是您可以尝试的快速测试：

var returnButton = $("#<%= Return.ClientID %>");
alert(returnButton.attr("id");

如果您没有收到返回按钮的ID，则其代码不匹配，这就是您的点击事件无效的原因。如果是这种情况，请在页面上执行查看源并找出实际返回按钮ID的设置（使用 FireBug 或类似工具可以更容易）

Answer 2

将此作为单独的答案添加，因为它只是一大块代码与原始答案不完全相关，但确实按预期工作。我把你给的代码转换成asp.net的基本html，它确实有效，是否适用于你？

您可以尝试发布asp.net页面的输出而不是代码本身吗？也许没有在按钮元素的ID上设置某些东西。

<html>
<head>

 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js" type="text/javascript"></script>
</head>
<body>
<div ID="Content1">
        <div ID="pnlForms">
            <fieldset>
                <legend>Your Information</legend>
                <ol>
                    <li>
                        <label for="ctl00_content_name">
                            Your Name:</label>
                        <textbox ID="Name" runat="server" Width="150px"></TextBox>
                        <em class="optional">Optional </em></li>
                    <li>
                        <label for="ctl00_content_status">
                            Your Affiliation:*</label>
                        <select ID="ddlAffilation" Width="155px">
                            <option Value="" Selected="True">--Select One--</option>
                            <option>F</option>
                            <option>S</option>
                            <option>T</option>
                        </select
                    </li>
                </ol>
            </fieldset>
            <div style="text-align: center;">
            <Button ID="Submit" Value="Submit" OnClick="submit_Click">Submit</Button></div>
        </div>
    <div id="Complete" style="display: none;">
        <div ID="pnlComplete">          
            <p>Thank you</p>
            <div style="text-align: center;">
            <Button ID="Return" Value="Return">Return</Button></div>
        </div>
    </div>
</div>
<div ID="Content3">
    <script type="text/javascript">
        $(document).ready(function () {
            $("#Submit").click(function (e) {
                if (IsValid() == false) {
                    e.preventDefault();
                    return false;
                }
                else {
                    $("#pnlForms").fadeOut('slow');
                    $("#Complete").delay(800).fadeIn('slow');
                }
            });
            $("#Return").click(function () {
                $("#Complete").fadeOut('slow');
                $("#pnlForms").delay(1000).fadeIn('slow');
            });
            function IsValid() {
                // Add any other validation in here
                if ($("#ddlAffilation").val() == "") {
                    return false;
                }
                return true;
            }
        });
    </script>
</div>
</body>
</html>

jQuery in .net验证dropdownlist，fadein和fadeout面板

2 个答案: