Clear ASP.Net TextBox value and CheckBoxList selection on jQuery Sweet alert Ok Button Click using C# and VB.Net

Last Reply 2 months ago By dharmendr

Posted 2 months ago

Hello Sir,

I want to clear the textbox values and uncheck the checkboxlist after click of okay button in alert message.

Below is the code I'm using to display the alert message in scriptmanager.

 ScriptManager.RegisterStartupScript(this, this.GetType(), key, "alert('Not available ');", true);

 

<div class="form-group">
    <asp:CheckBoxList ID="CheckBoxList1"  runat="server" OnSelectedIndexChanged="CheckBox1_CheckedChanged" AutoPostBack="true">
        <asp:ListItem  Value="Monday">Monday</asp:ListItem>
    </asp:CheckBoxList>
</div>
<label>Monday</label>
    <asp:TextBox ID="TextBox4"  runat="server"></asp:TextBox><br />
    <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox><br />
    <asp:TextBox ID="TextBox6" runat="server"></asp:TextBox><br />
</div>

After displaying this Not availble message if the user clicks okay then it should get cleared.

You are viewing reply posted by: dharmendr 2 months ago.
Posted 2 months ago Modified on 2 months ago

Hidemocloud,

You need to use .then and do the TextBox and CheckBox clear using jQuery. Create a JavaScript function and call it in code behind. 

Refer below example.

HTML

<asp:TextBox ID="TextBox4" runat="server" Text="Test 1"></asp:TextBox><br />
<asp:TextBox ID="TextBox5" runat="server" Text="Test 2"></asp:TextBox><br />
<asp:TextBox ID="TextBox6" runat="server" Text="Test 3"></asp:TextBox><br />
<asp:CheckBoxList ID="CheckBoxList1" name="Test" runat="server" OnSelectedIndexChanged="CheckBox1_CheckedChanged"
    AutoPostBack="true">
    <asp:ListItem Value="Monday">Monday</asp:ListItem>
</asp:CheckBoxList>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.5/bluebird.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src='https://cdn.jsdelivr.net/sweetalert2/6.3.8/sweetalert2.min.js'> </script>
<link rel="stylesheet" media="screen" href='https://cdn.jsdelivr.net/sweetalert2/6.3.8/sweetalert2.min.css' />
<link rel="stylesheet" media="screen" href='https://cdn.jsdelivr.net/sweetalert2/6.3.8/sweetalert2.css' />
<script type="text/javascript">
    function AlertClear(selected) {
        swal({ text: "Not available" }).then(function () {
            document.getElementById('<%=TextBox4.ClientID%>').value = "";
            document.getElementById('<%=TextBox5.ClientID%>').value = "";
            var checkboxes = $('#CheckBoxList1').find('input[type="checkbox"]');
            for (var i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].value == selected) {
                    checkboxes[i].checked = false;
                }
            }
        });
    }
</script>

C#

protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(this, this.GetType(), "key", "window.onload = function() { AlertClear('" + CheckBoxList1.SelectedValue + "'); };", true);
}

VB.Net

Protected Sub CheckBox1_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs)
    ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "key", "window.onload = function() { AlertClear('" & CheckBoxList1.SelectedValue & "'); };", True)
End Sub

Screenshot