We Keep Coding

Clear Specific Textboxes ASPX page

I'm having trouble trying to clear these banking and routing numbers that are in a textbox on an aspx page. I've seen it used where they would just specify the ID of the textbox and do a textbox.text = String.Empty(). But that doesn't seem to work here. Maybe I'm using the wrong ID?? I also tried using JQuery .val("") but that didn't seem to work either.
Here's the code, i'd like to clear both Routing and Account text fields on click of a button:
<div id="DivUser1BankInfo" class="labelAndTextboxContainer">
<div class="labelContainer">
<asp:Label CssClass="rightFloat" ID="User1LabelRoutingNumber" runat="server" Text="Routing #:"></asp:Label><br />
</div>
<div class="textboxContainer">
<asp:TextBox ID="User1TextRoutingNumber" CssClass="leftFloat " runat="server" Font-Size="Smaller" Width="180px"
Text='<%# Bind("User1BankRoutingNumber") %>'
Visible='<%# ApexRemington.BLL.VendorBLL.ShowUser1BankInfo((string)Eval("User1BankInfoEditUser")) %>' /><br />
</div>
<div class="labelContainer">
<asp:Label CssClass="rightFloat" ID="User1LabelAccountNumber" runat="server" Text="Account #:"></asp:Label><br />
</div>
<div class="textboxContainer">
<asp:TextBox ID="User1TextAccountNumber" CssClass="leftFloat " runat="server" Font-Size="Smaller" Width="180px"
Text='<%# Bind("User1BankAccountNumber") %>'
Visible='<%# ApexRemington.BLL.VendorBLL.ShowUser1BankInfo((string)Eval("User1BankInfoEditUser")) %>' /><br />
</div>
<button type="button" id="clearButton1">Clear</button>
<div class="button">
<asp:Button ID="User1ClearBankInfo" runat="server" Text="Reset"
Visible='<%# ApexRemington.BLL.VendorBLL.ShowUser1BankInfo((string)Eval("User1BankInfoEditUser")) %>' OnClick="clearFields_btn"/><br />
</div>
The OnClick= "clearFields_btn" code behind =
protected void clearFields_btn(object sender, EventArgs e)
{
}
Thanks for any help!

I haven't worked with ASP.NET in a little while, but I think you may want the OnClientClick event, not OnClick. OnClientClick is for client-side code (your jQuery/JavaScript) and OnClick is for server-side code (your C# or VB.NET).
You'd also want your OnClientClick event method to return false, or the server-side code will also fire.
So I think you want something like:
<asp:Button ID="User1ClearBankInfo" runat="server" Text="Reset"
Visible='<%# ApexRemington.BLL.VendorBLL.ShowUser1BankInfo((string)Eval("User1BankInfoEditUser")) %>
OnClientClick="clearText();"/>
And then clearText would look like this:
<script>
function clearText()
{
//our two IDs
$('input[id*="User1TextRoutingNumber"]').each(function(index) {
$(this).val('');
});
$('input[id*="User1TextAccountNumber"]').each(function(index) {
$(this).val('');
});
return false;
}
</script>
EDIT: shoot, I see my mistake. Fixed the code to clear the text of the textbox, not the button ("this").
Edit: removed the space from the "clear" text val.
EDIT: Made search a little more flexible, less dependent on GridView or no GridView.

Try this
<script>
var clear = function(textboxID){$('input[id*=' + textboxID + ']').val('');};
return false;
</script>
<button id="btClearText" onclick="javascript:return clear('txtName');">
but if you need a more specific answer then please post more information

You need something like this. Assuming you want a client side solution (not very clear from your question).
<script type="text/javascript">
function clearTextBox() {
document.getElementById("<%= User1TextRoutingNumber.ClientID %>").value = "";
//or
$("#<%= User1TextRoutingNumber.ClientID %>").val("");
}
</script>
The <%= User1TextRoutingNumber.ClientID %> will ensure you get the correct ID for javascript/jQuery.
A server side solution would be:
protected void clearFields_btn(object sender, EventArgs e)
{
for (int i = 0; i < GridView1.Rows.Count; i++)
{
TextBox tb = GridView1.Rows[i].FindControl("User1TextAccountNumber") as TextBox;
tb.Text = "";
}
}

asp.net button event not firing when using jquery and html5 required attribute in textbox

I have a problem with asp.net c# button event as it doesn't fire. In my form I use html 5 required attributes for text boxes and a jQuery password strengh meter for the password field (this password field also have a required attribute).
Aspx
<asp:TextBox ID="txtNewPwd" required="required" runat="server" CssClass="form-control" ToolTip="New Password" placeholder="New Password"></asp:TextBox>
<asp:Label ID="lblResult" runat="server" />
<asp:HiddenField ID="hdnResult" runat="server" />
<asp:Button ID="btnSubmit" runat="server" CssClass="btn btn-success custombutton" Text="SAVE" OnClick="btnSubmit_Click"/>
Script
<script type="text/javascript">
$(document).ready(function () {
$('#MainContent_txtNewPwd').keyup(function () {
$('#MainContent_lblResult').html(passwordStrength($('#MainContent_txtNewPwd').val(), $('#MainContent_hdnUserID').val()))
$('#MainContent_hdnResult').val(passwordStrength($('#MainContent_txtNewPwd').val(), $('#MainContent_hdnUserID').val()))
})
});
var parameter = Sys.WebForms.PageRequestManager.getInstance();
parameter.add_endRequest(function () {
$('#MainContent_txtNewPwd').keyup(function () {
$('#MainContent_lblResult').html(passwordStrength($('#MainContent_txtNewPwd').val(), $('#MainContent_hdnUserID').val()))
$('#MainContent_hdnResult').val(passwordStrength($('#MainContent_txtNewPwd').val(), $('#MainContent_hdnUserID').val()))
})
});
</script>

Add to your page "runat="server"" script, and there handle your event. Then you can work with required property OnClick

Check All Checkboxs feature Asp.net

I basically want to ask this question(How to implement "select all" check box in HTML?) but from a asp.net point of view. There seems to be more challenges to over come when you are using asp.net to do this. The CssClass attribute generates a span container with the class you specified and it doesn't get placed on the input. Along with the challenge of masterpages and controls. I am looping through records and displaying them with a checkbox. I was hoping to grab all the checkboxes by class to perform the check all. I don't think that will be possible. Any advice?
Markup:
<asp:CheckBox runat="server" ID="checkAll" CssClass="CheckAll" />
<asp:Table ID="tblitems" Visible="false" Width="80%" HorizontalAlign="Center" runat="server">
<asp:TableRow>
//The data gets added as a table row.
</asp:TableRow>
</asp:Table>`
Browser:
//Check All check box
<span class="CheckAll"><input id="ctl00_ContentPlaceHolder1_checkAll" type="checkbox" name="ctl00$ContentPlaceHolder1$checkAll" /></span>
//Each checkbox that will be checked looks like this
<span class="chkBox"><input id="ctl00_ContentPlaceHolder1_ctl01" type="checkbox" name="ctl00$ContentPlaceHolder1$ctl01" /></span>
JavaScript
$('.CheckAll').click(function (event) {
alert("start");
if (this.checked) {
// Iterate each checkbox
$(':checkbox').each(function () {
this.checked = true;
});
alert("end");
}
});

ClientIDMode property of the checkbox control will allow you to more easily work with client-side selectors, like this:
Markup:
<asp:CheckBox runat="server" ID="checkAll" CssClass="CheckAll" ClientIDMode="Static" />
Check out the Control.ClientIDMode Property MSDN documentation.
Note: ClientIDMode is available in ASP.NET 4.0 and later.

Since each checkbox is in a span with a class 'chkBox', locate the checkboxes using that selector on the click handler:
$('.CheckAll').on('click', function (event) {
var checked = $(this).prop('checked');
$('.chkBox :checkbox').prop('checked', checked);
});
It would be more precise if you wrapped all the checkboxes you'd like to have checked in a container div:
<div id="myCheckboxes">
// .NET code here
</div>
JS:
$('.CheckAll').on('click', function (event) {
var checked = $(this).prop('checked');
$('#myCheckboxes :checkbox').prop('checked', checked);
});

Karl, I believe, has improved the approach. However, if you want to stick with what you have, modify your Javascript to be the following:
$('.CheckAll').find(':checkbox').click(function (event) {
alert("start");
if (this.checked) {
// Iterate each checkbox
$(':checkbox').each(function () {
this.checked = true;
});
alert("end");
}
});

The following code basically selectes all checkboxes, and change the check statuses based on the CheckAll Checkbox.
<script type="text/javascript">
$(document).ready(function () {
$('#<%= CheckAll.ClientID %>').click(function() {
var checkedStatus = this.checked;
$("input[type='checkbox']").attr('checked', checkedStatus);
});
});
</script>
<asp:CheckBox runat="server" ID="CheckAll" />
<asp:CheckBox runat="server" ID="Check1" />
<asp:CheckBox runat="server" ID="Check2" />
<asp:CheckBox runat="server" ID="Check3" />
<asp:CheckBox runat="server" ID="Check4" />
Multiple Group of CheckBoxes in a Single Page
If you have multiple groups of checkboxes in a single page, you can differentiate them with class.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"
Inherits="WebApplication2012.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// Selects all enabled checkboxes
$("#<%= CheckAll.ClientID %>").click(function () {
var checkedStatus = this.checked;
$(".myCheckBox input[type='checkbox']").attr('checked', checkedStatus);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:CheckBox runat="server" ID="CheckAll" Text="Check All" CssClass="myCheckAll" /><br />
<asp:CheckBox runat="server" ID="Check1" Text="Check1" CssClass="myCheckBox" /><br />
<asp:CheckBox runat="server" ID="Check2" Text="Check2" CssClass="myCheckBox" /><br />
<asp:CheckBox runat="server" ID="Check3" Text="Check3" CssClass="myCheckBox" /><br />
<asp:CheckBox runat="server" ID="Check4" Text="Check4" CssClass="myCheckBox" />
</form>
</body>
</html>

I got it to work using this script below. This not work for every scenario but it worked very well for mine so far. Thanks!
mark up
<asp:CheckBox runat="server" ID="CheckAll" OnClick="toggle(this)" />
Javascript
function toggle(source) {
checkboxes = document.getElementsByTagName('input');
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}

When checkbox checked get datagrid value using jquery

I have a checkbox template field within a gridview in c#, this field also has a hidden field with the id behind it. I want to use jQuery to raise an event on click of the checkbox to grab a datakey value so I can run a query through jQuery and add the checked item to the database. I have seen examples that get datakeys when an overall button is clicked but I want this to happen on each checkbox clicked within the gridview. I currently get "undefined" when trying to access the id.
C# within the gridview
<ItemTemplate>
<asp:CheckBox ID="CheckBox" CssClass="checkbox" runat="server" />
<asp:HiddenField ID="idnum" runat="server" Value='<%# Eval("id") %>' />
</ItemTemplate>
jQuery
$(document).ready(function () {
var gridResults = document.getElementById('<%= grdResults.ClientID %>');
$("form input:checkbox").click(function (e) {
var id = $(this).next('#idnum').val();
alert(id);
return false;
});
});

If there are multiple fields with ID="idnum" you should probably change that to class="idnum". After adding the class you could get the value using:
var gridResults = $(e.target).next('.idnum').val();
If idnum is just an example which is different for each field, you can just use var id = $('#idnum').val();
EDIT: changed e.target.next('.idnum').val(); to $(e.target).next('.idnum').val(); to convert the element to jQuery object

//This is the script to get datakeyname value on check box check event inside GridView
<script type="text/jscript">
$(document).ready(function () {
var gridResults = document.getElementById('<%= grdCateogry.ClientID %>');
$("form input:checkbox").click(function (e) {
var id = $(this).next($('#IDVal')).val();
alert(id);
return false;
});
});
</script>
//This is the GridView
<asp:GridView ID="grdCateogry" DataKeyNames="CategoryId" runat="server">
<Columns>
<asp:TemplateField HeaderText ="Try" ItemStyle-Width="20px">
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" />
<asp:HiddenField ID="IDVal" runat="server" Value='<%# Eval("CategoryId") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

ASP.NET Gridview Checkbox column - Onclick and jquery

On click of checkbox, I need to retrieve immediate parent span's class value:
The checkbox column is defined in an ItemTemplate as:
<asp:CheckBox CssClass='<%# Eval("ID") %>' Checked='<%# Eval("IsSelected") %>'
Text="" runat="server" onclick="CartItemCheckClicked()" />
The JS function is defined as:
function CartItemCheckClicked() {
alert($(this).parent().attr('class')); //Undefined
//alert($(this).attr('id')); //Undefined
}
Ouput Sample HTML
<span class="283"><input type="checkbox" onclick="CartItemCheckClicked();" checked="checked" name="grvShoppingCart$ctl02$ctl00" id="grvShoppingCart_ctl00_0"></span>
But the result is always 'undefined'. How do I access the checkbox or parent span?

Just pass checkbox to click function:
onclick="CartItemCheckClicked(this);"
And in js file than:
function CartItemCheckClicked(chk) {
alert($(chk).parent().attr('class'));
}