Show "Are you sure?" Message Before clearing a textbox of data?

Simflex 301

The following code disables a checkbox called credChk when there is data in two textboxes control ID txtcreditorname and control ID txtcreditoraddress respectively.

Here is the code:

            <asp:TemplateField HeaderText="Name">
            <headerstyle horizontalalign="Left" />
                <ItemTemplate>
                    <asp:TextBox ID="txtcreditorname" Text='<%# Eval("creditorname") %>' placeholder="Name of creditor..." runat="server" style="width:375px;" class="form-control" AutoPostBack="true" OnTextChanged="txtcreditorname_TextChanged"></asp:TextBox><br />
            <asp:CheckBox ID="credChk" runat="server" Checked="false" AutoPostBack="true" OnCheckedChanged="CredCheckChanged" /><span style="color:#ff0000">*Check this box if N/A</span>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Address">
            <ItemStyle HorizontalAlign="Left"></ItemStyle>
                <ItemTemplate>
                    <asp:TextBox ID="txtcreditoraddress" Text='<%# Eval("creditoraddress") %>' placeholder="Address..." runat="server" style="width:375px;" class="form-control" AutoPostBack="true" OnTextChanged="txtcreditorname_TextChanged"></asp:TextBox><br /><br />
                </ItemTemplate>
            </asp:TemplateField>

    Protected Sub txtcreditorname_TextChanged(sender As Object, e As EventArgs)
        For Each row As GridViewRow In grvCred.Rows
            Dim credname As TextBox = TryCast(row.FindControl("txtcreditorname"), TextBox)
            Dim credaddress As TextBox = TryCast(row.FindControl("txtcreditoraddress"), TextBox)
            Dim credSelect As CheckBox = TryCast(row.FindControl("credChk"), CheckBox)
            If credname.Text.Length > 0 AndAlso credaddress.Text.Length > 0 Then credSelect.Enabled = False Else credSelect.Enabled = True
        Next
    End Sub

The following method disables these textboxes if the credChk checkbox is checked and enables them if the checkbox is unchecked.

If the textboxes have data, then when the checkbox is checked, the data in those two textboxes are cleared.

This works fine as intended and this is the requirement from the users of this app.

There is, however, one other requirement that we are having problem implementing.

If the checkbox is checked and there is data in those textboxes, before they are cleared, a message is to pop up warning the user that s/he is about to clear data in those textboxes and whether s/he wishes to continue.

If the user clicks OK or Yes on the popped message, then the textboxes are cleared.

If the user wishes to NOT clear the textboxes, then the user clicks CANCEL.

We are having issues integrating this to the code above.

Any ideas how to handle this?

Many thanks in advance.

SurferOnWww 3,816 Reputation points

2024-01-05T01:16:31.15+00:00

How about using a client script (javascript or jQuery) to check if the checkbox is checked and there is data in those textboxes? You can show the warning by using a window.confirm. If a user selects Cancel on the confirm dialog you can cancel the PostBack.
Simflex 301 Reputation points

2024-01-05T01:52:29.6033333+00:00

@SurferOnWww , thank you for your prompt response.

I was hoping for server side solution to integrate with what I currently have.

However, could you please share a client side solution preferrably jQuery that works with gridview?
SurferOnWww 3,816 Reputation points

2024-01-05T05:03:06.04+00:00

If the textboxes have data, then when the checkbox is checked, the data in those two textboxes are cleared.

I guess that you do it at the server side at the time of postback. Please describe what the trigger of postback is and show the code of the server side to clear.

Accepted answer

Lan Huang-MSFT 30,176 Microsoft Vendor

Hi @Simflex,

The function of popping up a warning message can refer to the following code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('input[type=checkbox]').click(function () {
                var areYouSure = confirm('Are you sure you want to clean the data?');
                if (areYouSure) {
                    $(this).prop('checked', this.checked);
                } else {
                    $(this).prop('checked', !this.checked);
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:GridView ID="grvCred" runat="server" AutoGenerateColumns="false">
                <Columns>
                    <asp:TemplateField HeaderText="Name">
                        <HeaderStyle HorizontalAlign="Left" />
                        <ItemTemplate>
                            <asp:TextBox ID="txtcreditorname" Text='<%# Eval("creditorname") %>' placeholder="Name of creditor..." runat="server" Style="width: 375px;" class="form-control" AutoPostBack="true" OnTextChanged="txtcreditorname_TextChanged"></asp:TextBox><br />
                            <asp:CheckBox ID="credChk" runat="server" AutoPostBack="true" OnCheckedChanged="CredCheckChanged" /><span style="color: #ff0000">*Check this box if N/A</span>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Address">
                        <ItemStyle HorizontalAlign="Left"></ItemStyle>
                        <ItemTemplate>
                            <asp:TextBox ID="txtcreditoraddress" Text='<%# Eval("creditoraddress") %>' placeholder="Address..." runat="server" Style="width: 375px;" class="form-control" AutoPostBack="true" OnTextChanged="txtcreditorname_TextChanged"></asp:TextBox><br />
                            <br />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
    </form>
</body>
</html>

 Protected Sub CredCheckChanged(ByVal sender As Object, ByVal args As EventArgs)
        Dim selRowIndex As Integer = (CType(((CType(sender, CheckBox)).Parent.Parent), GridViewRow)).RowIndex
        Dim cb As CheckBox = CType(grvCred.Rows(selRowIndex).FindControl("credChk"), CheckBox)
        Dim credname As TextBox = CType(grvCred.Rows(selRowIndex).FindControl("txtcreditorname"), TextBox)
        Dim credaddress As TextBox = CType(grvCred.Rows(selRowIndex).FindControl("txtcreditoraddress"), TextBox)

        If cb.Checked Then
            credname.Text = ""
            credaddress.Text = ""
            cb.Checked = False
        End If
    End Sub

    Protected Sub txtcreditorname_TextChanged(ByVal sender As Object, ByVal e As EventArgs)
        For Each row As GridViewRow In grvCred.Rows
            Dim credname As TextBox = TryCast(row.FindControl("txtcreditorname"), TextBox)
            Dim credaddress As TextBox = TryCast(row.FindControl("txtcreditoraddress"), TextBox)
            Dim credSelect As CheckBox = TryCast(row.FindControl("credChk"), CheckBox)

            If credname.Text.Length > 0 AndAlso credaddress.Text.Length > 0 Then
                credSelect.Enabled = False
            Else
                credSelect.Enabled = True
            End If
        Next
    End Sub

Best regards,

Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Simflex 301 Reputation points

2024-01-05T04:02:31.52+00:00

@Lan Huang , thank you so much. This looks great but it is not working.

It doesn't do anything when the page loads with data from DB and I click the checkbox.

Just to be clear, the only thing added is the jQuery; no additional changes are made to the HTML or VB, correct?
Lan Huang-MSFT 30,176 Reputation points Microsoft Vendor

2024-01-05T05:11:51.36+00:00

Hi @Simflex,

You did not provide the OnCheckedChanged="CredCheckChanged" method. From the above code, you can see that I added the CredCheckChanged method in VB.

Below is everything I added.
Simflex 301 Reputation points

2024-01-05T09:15:16.2266667+00:00

@Lan Huang , it is working now sir. Thank you very much.

Thank you but there is still one issue.

You click the checkbox, you get the pop up message, "Are you sure..."

However, if you click the checkbox again, it pops the message again.

The pop up message should only occur when the box is being checked.

Can this be fixed?
Lan Huang-MSFT 30,176 Reputation points Microsoft Vendor

2024-01-05T09:54:14.57+00:00

Hi @Simflex,

I think you can disable the checkbox after clearing the data.

Change cb.Checked = false; in the picture to cb.Enabled = false;
Simflex 301 Reputation points

2024-01-05T18:42:16.99+00:00

@Alan Huang , we don't want to disable the checkbox when textboxes are empty or cleared. We want checkboxes enabled so user can check them in the event that textboxes are empty, they can check the checkbox to place N/A into the textboxes.

Also, I know you have been extremely helpful - thank you but is it possible to use a class instead of ID attribute on the jQuery to work with the gridview?

For some reason, it works on my personal laptop that I use for testing but does not work on my company laptop where the code is actually used.

I have had this situation before and work ended up working for me is when I use class instead of control Id.

Lan Huang-MSFT 30,176 Microsoft Vendor

Hi @Simflex,

Also, I know you have been extremely helpful - thank you but is it possible to use a class instead of ID attribute on the jQuery to work with the gridview?

Of course, you could use a class instead, but the jQuery code I provided doesn't use IDs, it just looks for checkboxes. I don't understand why you made this request?

we don't want to disable the checkbox when textboxes are empty or cleared. We want checkboxes enabled so user can check them in the event that textboxes are empty, they can check the checkbox to place N/A into the textboxes.

If you don't want to disable the check box, you can make a judgment and only call the pop-up message when the text box has a value.

I tested two methods for your reference.

The first one implements the front-end pop-up message:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            var a;
            var b;
            $('#<%= grvCred.ClientID %> input[type="checkbox"]').change(function () {
                $(this).closest('tr').children('td').each(function () {

                    a = $(this).find("input[class='creditorname']").val();
                    b = $(this).find("input[class='creditoraddress']").val();

                });
                if (a != '' && b != '') {
                    var areYouSure = confirm('Are you sure you want to clean the data?');

                    if (areYouSure) {

                        $(this).prop('checked', this.checked);

                    } else {

                        $(this).prop('checked', !this.checked);

                    };
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:GridView ID="grvCred" runat="server" AutoGenerateColumns="false">
                <Columns>
                    <asp:TemplateField HeaderText="Name">
                        <HeaderStyle HorizontalAlign="Left" />
                        <ItemTemplate>
                            <asp:TextBox ID="txtcreditorname" Text='<%# Eval("creditorname") %>' placeholder="Name of creditor..." runat="server" Style="width: 375px;" class="creditorname" AutoPostBack="true" OnTextChanged="txtcreditorname_TextChanged"></asp:TextBox><br />
                            <asp:CheckBox ID="credChk" runat="server" AutoPostBack="true" OnCheckedChanged="CredCheckChanged" /><span style="color: #ff0000">*Check this box if N/A</span>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Address">
                        <ItemStyle HorizontalAlign="Left"></ItemStyle>
                        <ItemTemplate>
                            <asp:TextBox ID="txtcreditoraddress" Text='<%# Eval("creditoraddress") %>' placeholder="Address..." runat="server" Style="width: 375px;" class="creditoraddress" AutoPostBack="true" OnTextChanged="txtcreditorname_TextChanged"></asp:TextBox><br />
                            <br />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
    </form>
</body>
</html>

 Protected Sub CredCheckChanged(ByVal sender As Object, ByVal args As EventArgs)
        Dim selRowIndex As Integer = (CType(((CType(sender, CheckBox)).Parent.Parent), GridViewRow)).RowIndex
        Dim cb As CheckBox = CType(grvCred.Rows(selRowIndex).FindControl("credChk"), CheckBox)
        Dim credname As TextBox = CType(grvCred.Rows(selRowIndex).FindControl("txtcreditorname"), TextBox)
        Dim credaddress As TextBox = CType(grvCred.Rows(selRowIndex).FindControl("txtcreditoraddress"), TextBox)

        If cb.Checked Then

            If credname.Text.Length > 0 AndAlso credaddress.Text.Length > 0 Then
                credname.Text = ""
                credaddress.Text = ""
                cb.Checked = False
            Else
                credname.Text = "N/A"
                credaddress.Text = "N/A"
                cb.Checked = False
            End If
        End If
    End Sub

    Protected Sub txtcreditorname_TextChanged(ByVal sender As Object, ByVal e As EventArgs)
        For Each row As GridViewRow In grvCred.Rows
            Dim credname As TextBox = TryCast(row.FindControl("txtcreditorname"), TextBox)
            Dim credaddress As TextBox = TryCast(row.FindControl("txtcreditoraddress"), TextBox)
            Dim credSelect As CheckBox = TryCast(row.FindControl("credChk"), CheckBox)

            If credname.Text.Length > 0 AndAlso credaddress.Text.Length > 0 Then
                credSelect.Enabled = False
            Else
                credSelect.Enabled = True
            End If
        Next
    End Sub

The second one implements the back-end pop-up message:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:GridView ID="grvCred" runat="server" AutoGenerateColumns="false">
                <Columns>
                    <asp:TemplateField HeaderText="Name">
                        <HeaderStyle HorizontalAlign="Left" />
                        <ItemTemplate>
                            <asp:TextBox ID="txtcreditorname" Text='<%# Eval("creditorname") %>' placeholder="Name of creditor..." runat="server" Style="width: 375px;" class="form-control" AutoPostBack="true" OnTextChanged="txtcreditorname_TextChanged"></asp:TextBox><br />
                            <asp:CheckBox ID="credChk" runat="server" AutoPostBack="true" OnCheckedChanged="CredCheckChanged" /><span style="color: #ff0000">*Check this box if N/A</span>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Address">
                        <ItemStyle HorizontalAlign="Left"></ItemStyle>
                        <ItemTemplate>
                            <asp:TextBox ID="txtcreditoraddress" Text='<%# Eval("creditoraddress") %>' placeholder="Address..." runat="server" Style="width: 375px;" class="form-control" AutoPostBack="true" OnTextChanged="txtcreditorname_TextChanged"></asp:TextBox><br />
                            <br />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
    </form>
</body>
</html>

 Protected Sub CredCheckChanged(ByVal sender As Object, ByVal args As EventArgs)
        Dim selRowIndex As Integer = (CType(((CType(sender, CheckBox)).Parent.Parent), GridViewRow)).RowIndex
        Dim cb As CheckBox = CType(grvCred.Rows(selRowIndex).FindControl("credChk"), CheckBox)
        Dim credname As TextBox = CType(grvCred.Rows(selRowIndex).FindControl("txtcreditorname"), TextBox)
        Dim credaddress As TextBox = CType(grvCred.Rows(selRowIndex).FindControl("txtcreditoraddress"), TextBox)

        If cb.Checked Then

            If credname.Text.Length > 0 AndAlso credaddress.Text.Length > 0 Then
                Me.Page.ClientScript.RegisterStartupScript(Me.[GetType](), "alert", "confirm('Are you sure you want to clean the data?');", True)
                credname.Text = ""
                credaddress.Text = ""
                cb.Checked = False
            Else
                credname.Text = "N/A"
                credaddress.Text = "N/A"
            End If
        End If
    End Sub

    Protected Sub txtcreditorname_TextChanged(ByVal sender As Object, ByVal e As EventArgs)
        For Each row As GridViewRow In grvCred.Rows
            Dim credname As TextBox = TryCast(row.FindControl("txtcreditorname"), TextBox)
            Dim credaddress As TextBox = TryCast(row.FindControl("txtcreditoraddress"), TextBox)
            Dim credSelect As CheckBox = TryCast(row.FindControl("credChk"), CheckBox)

            If credname.Text.Length > 0 AndAlso credaddress.Text.Length > 0 Then
                credSelect.Enabled = False
            Else
                credSelect.Enabled = True
            End If
        Next
    End Sub

Simflex 301 Reputation points

2024-01-11T01:05:59.7066667+00:00

@Lan Huang , You are incredibly good and very generous with your expertise. They both worked great. I like the second option which integrates more nicely with my existing code. Thank you very much for you kindness.

Share via

Show "Are you sure?" Message Before clearing a textbox of data?

0 additional answers

Your answer