Pages

Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

Monday, 30 July 2012

Jquery+Javascript for Checkbox Behaves like radio Button


 $(function () {
        $('#<%=chkRepoAccRights.ClientID %> :checkbox').click(function () {
            var selectedIndex = $('#<%=chkRepoAccRights.ClientID %> :checkbox').index($(this));
            var chkRepoAccRights = document.getElementById('<%=chkRepoAccRights.ClientID %>');
            var chkRepoAccRightsCount = chkRepoAccRights.getElementsByTagName("input");
            for (i = 0; i < chkRepoAccRightsCount.length; i++)
                    chkRepoAccRightsCount[i].checked = false;
            chkRepoAccRightsCount[selectedIndex].checked = true;
        });
    });

Thursday, 13 October 2011

Javascript validate positive integer value with decimal places

This javascript function will allow user to enter integer value with decimal places.

This JavaScript function you can all in onkeypress event of the textbox and it will validate the user entered value in client side.





function allowPositiveNumber(e) {
            var charCode = (e.which) ? e.which : event.keyCode
  
            if (charCode > 31 && (charCode < 46 || charCode > 57 )) {
                return false;
            }
            return true;
 
}

And Below is the HTML Text Box code



<input name="myTextBox" onkeypress="return allowPositiveNumber(event);" /><br>

Monday, 10 October 2011

Call Page Method Using Javascript


Hi all,
Try this example to Call Page Method Using Client Side -Javascript in ASP.Net
ASP.Net AJAX ScriptManager allows you to call Server Side ASP.net methods from client side without any PostBack using PageMethods. Actually it is an AJAX call to the server but it allows us to call the method or function defined server side.
Enabling PageMethods
The first thing you need to do is add a ASP.Net AJAX ScriptManager to the page and set itsEnablePageMethods property to true as shown below
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>

HTML Markup :-
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<div>
Your Name :
<asp:TextBox ID="txtUserName" runat="server" ></asp:TextBox>
<input id="btnGetTime" type="button" value="Show Current Time" onclick="ShowCurrentTime()"/>
</div>
</form>

Client Side Method :-
<script type="text/javascript">
function ShowCurrentTime() {
PageMethods.GetCurrentTime(document.getElementById("<%=txtUserName.ClientID%>").value, OnSuccess);
}
function OnSuccess(response, userContext, methodName) {
alert(response);
}
</script>

Server Side Methods :-
[System.Web.Services.WebMethod]
publicstaticstring GetCurrentTime(string name)
{
return"Hello " + name + Environment.NewLine + "The Current Time is: "
        + DateTime.Now.ToString();
}

Hope this helps
Good Luck

Get Value of checked item in CheckListBox


Hi all,
try this example to Get Value of checked item in CheckListBox using Javascript
1) Add this Javascript code :-


<script language="javascript" type="text/javascript">
        function CheckItem() {
            var tbl = document.getElementById('<%= CheckBoxList1.ClientID %>').childNodes[0];
            alert(tbl.childNodes[i].childNodes.length);
            for (var i = 0; i < tbl.childNodes.length; i++) {
                for (var k = 0; k < tbl.childNodes[i].childNodes.length; k++) {
                    if (tbl.childNodes[i].childNodes[k].nodeName == "TD") {
                        var currentTD = tbl.childNodes[i].childNodes[k];
                        for (var j = 0; j < currentTD.childNodes.length; j++) {
                            if (currentTD.childNodes[j].nodeName == "SPAN") {
                                var currentSpan = currentTD.childNodes[j];
                                for (var l = 0; l < currentSpan.childNodes.length; l++) {
                                    if (currentSpan.childNodes[l].nodeName == "INPUT" && currentSpan.childNodes[l].type == "checkbox") {
                                        var currentChkBox = currentSpan.childNodes[l];
                                     
                                        if (currentChkBox.checked) {
                                            alert(currentSpan.alt);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
</script>

and HTML Code will be :-



<asp:CheckBoxList ID="CheckBoxList1" runat="server"OnDataBound="CheckBoxList1_DataBound" AppendDataBoundItems="true" >
    </asp:CheckBoxList>
     <input id="Button1" type="button" value="button" onclick="javascript:CheckItem();" />

and in code behind :-



protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {

            CheckBoxList1.DataSource = BindUsers();
            CheckBoxList1.DataTextField = "User_Name";
            CheckBoxList1.DataValueField = "User_ID";
            CheckBoxList1.DataBind();
        }

    }
    protected void CheckBoxList1_DataBound(object sender, EventArgs e)
    {
        CheckBoxList chkList = (CheckBoxList)(sender);
        foreach (ListItem item in chkList.Items)
        {
            item.Attributes.Add("alt", item.Value);
        }
    }


Hope this helps
Good Luck



Validate Number of Checked items in CheckListBox using Javascript


Hi all ,
try this example to Validate Number of Checked items in CheckListBox using Javascript
try this Javascript function :-


<script language="javascript" type="text/javascript">
        var atLeast = 1
        function Validate() {
            var CHK = document.getElementById("<%=CheckBoxList1.ClientID%>");
            var checkbox = CHK.getElementsByTagName("input");
            var counter = 0;
            for (var i = 0; i < checkbox.length; i++) {

                if (checkbox[i].checked) {
                    counter++;
                 
                }
            }
            if (atLeast > counter) {
                alert("Please select atleast " + atLeast + " item(s)");
                return false;
            }
            return true;
        }
</script>

The HTML Page will be :-


<asp:CheckBoxList ID="CheckBoxList1" runat="server"  >
    </asp:CheckBoxList>
        <input id="Button1" type="button" value="button" onclick="javascript:Validate();" />


Use Required Field Validator for CheckboxList


<script language="javascript" type="text/javascript">
    function ValidateChkList(source, arguments)
    {                                                   
        arguments.IsValid = IsCheckBoxChecked() ? true : false;  

    }

    function IsCheckBoxChecked()
    {   
        var isChecked = false;
        var list =document.getElementById('<%= CheckBoxList1.ClientID %>');
        if(list != null)
        {
         for (var i=0; i<list.rows.length; i++)
         {
          for (var j=0; j<list.rows[i].cells.length; j++)
          {
           var listControl = list.rows[i].cells[j].childNodes[0];                      
           if(listControl.checked)
           {                      
            isChecked = true;
           }
          }
         }
         }
         return isChecked;

    }
    </script>

   <div>
        <asp:CheckBoxList ID="CheckBoxList1" runat="server">
            <asp:ListItem Text="C#" ></asp:ListItem>
            <asp:ListItem Text="VB"></asp:ListItem>
        </asp:CheckBoxList>
        <asp:CustomValidator ID="CustomValidator1" ClientValidationFunction="ValidateChkList"
            runat="server" >Required.</asp:CustomValidator>
    </div>
    <div>
        <asp:Button ID="Button2" runat="server" Text="Submit" OnClick="Button2_Click"  />
    </div>

Tuesday, 4 October 2011

Javascript for Maxlength in Textarea

Description: This is a simple but effective script for extending your textarea with a maxlength attribute, so the user's input cannot exceed a certain number of characters. Works with any number of textareas on the page.




Step 1: Add the below script to the <HEAD> section of your page:

<script type="text/javascript">
function ismaxlength(obj){var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : ""
if (obj.getAttribute && obj.value.length>mlength)
obj.value=obj.value.substring(0,mlength)
}
</script>
Step 2: Inside any textarea you wish to add a "maxlength" attribute to, simply do the following:
<textarea maxlength="40" onkeyup="return ismaxlength(this)"></textarea>

The part in red is what you should add, with "40" obviously being the maximum number of characters accepted by this textarea.


Enjoy!