简体   繁体   中英

Performing both client side and server side functions on button click - Specific Scenario

I have a checkbox, label and button control. If the checkbox is not checked and button is clicked, I need to display a message in label stating to check the checkbox first. If the checkbox is checked and then the button clicked, it should allow me to proceed.

This is very similar to the terms and conditions screens,where if you dont check the checkbox - you are not allowed to proceed.

I am using the below javascript. Please let me know how do I accomplish this functionality?

<script type="text/javascript">
function testCheckbox() {
    var obj = document.getElementById('<%= chkTerms.ClientID %>');
    if (obj.checked == false) {
        document.getElementById("lblCheck").style.visibility = "visible";
        return false;
    }
}
</script>
<asp:Label ID="lblTerms" runat="server" Text="I agree to the Terms and Conditions">   </asp:Label>

<asp:Label ID="lblCheck" runat="server" Text="Please agree to the terms and conditions to proceed"></asp:Label>

<asp:Button ID="btnProceed" runat="server" OnClientClick ="return testCheckbox()"   OnClick="btnProceed_Click" Text="Submit" />

ASPX:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#lblCheck').hide();
        $('#btnProceed').click(function () {
            var $this = $('#chkTerms')

            if ($this.is(':checked')) {
                $('#lblCheck').hide();
                return true;
            } else {
                $('#lblCheck').show();
                return false;
            }
        });
    });
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:CheckBox ID="chkTerms" runat="server" Text="I agree to the Terms and Conditions"/><br />
<asp:Label ID="lblCheck" runat="server" Text="Please agree to the terms and conditions to proceed"/><br />
<asp:Button ID="btnProceed" runat="server" Text="Submit" onclick="btnProceed_Click1" />
</form>
</body>
</html>

Code behind:

protected void btnProceed_Click1(object sender, EventArgs e)
{
    Response.Write("DD");
    //your proceed
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM