Search This Blog

Sunday, September 6, 2015

Find Control Using Javascript



<script type="text/javascript" language="javascript">
        function Show() {

           //To set label text
            document.getElementById("Label1").innerHTML = "raghav";

            //To set textbox value
            document.getElementById("TextBox1").value = "raghav";

            //To set dropdown value
            document.getElementById("DropDownList1").value="2";

            //To get button text
            var button = document.getElementById("btnShow").value;

            //To get label text
            var label = document.getElementById("Label1").innerHTML;

            //To get textbox value
            var textbox = document.getElementById("TextBox1").value;

            //To get dropdown value
            var dropdown = document.getElementById("DropDownList1").value;

            //To check whether radiobutton is checked or not
            var radiobutton = document.getElementById("RadioButton1").checked;

            //To get radiobuttonlist value value
            var radiobuttonlist = document.getElementsByName("RadioButtonList1");
            for (var x = 0; x < radiobuttonlist.length; x++) {
                if (radiobuttonlist[x].checked) {
                    alert("You checked " + radiobuttonlist[x].id + " which has the value " + radiobuttonlist[x].value);
                }
            }


            //To check whether checkbox is checked or not
            var checkbox = document.getElementById("CheckBox1").checked;
                       
           //To get the value of checkboxlist item
            var checkList1 = document.getElementById("CheckBoxList1");
            var checkBoxList1 = checkList1.getElementsByTagName("input");
            for (var i = 0; i < checkBoxList1.length; i++) 
            {
                if (checkBoxList1[i].checked) 
                {
                    alert('checked - : ' + checkBoxList1[i].value)
                }
            }

        }
    </script>


Find Control in Gridview Using Javascript 

<script type="text/javascript" language="javascript">
    //Find control in Gridview
        function Show(link) {
            var row = link.parentNode.parentNode;
            
            //Find label control in gridview
            var label = row.cells[0].getElementsByTagName("span")[0].innerHTML;

            //Find textbox control in gridview
            var textbox = row.cells[1].getElementsByTagName("input")[0].value;

            //Find dropdown control in gridview
            var dropdown = row.cells[2].getElementsByTagName("select")[0].value;

            //Find checkbox control in gridview
            var checkbox = row.cells[3].getElementsByTagName("input")[0].checked;

            //Find linkbutton control in gridview
            var linkbutton = row.cells[4].getElementsByTagName("a")[0].innerHTML;
            //or
            var linkbutton = link.innerHTML; }
</script>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ShowHeader="false">
        <Columns>
        <asp:TemplateField>
        <ItemTemplate>
        <asp:Label ID="Label1" runat="server" Text='<% #Eval("name")%>'></asp:Label>
        </ItemTemplate>
        </asp:TemplateField>
        
        <asp:TemplateField>
        <ItemTemplate>
            <asp:TextBox ID="TextBox2" runat="server" Text='<% #Eval("name")%>'></asp:TextBox>
        </ItemTemplate>
        </asp:TemplateField> 
        
        <asp:TemplateField>
        <ItemTemplate>
            <asp:DropDownList ID="DropDownList2" runat="server">
            <asp:ListItem>1</asp:ListItem>
            <asp:ListItem>2</asp:ListItem>
            </asp:DropDownList>
        </ItemTemplate>
        </asp:TemplateField> 
        
        <asp:TemplateField>
        <ItemTemplate>
            <asp:CheckBox ID="CheckBox1" runat="server" />
        </ItemTemplate>
        </asp:TemplateField>
        
        <asp:TemplateField>
        <ItemTemplate>
            <asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="Show(this);" Text="Show"></asp:LinkButton>
        </ItemTemplate>
        </asp:TemplateField>
        </Columns>
        </asp:GridView>  

To Find Gridview or Other Data Controls
        var datalist = document.getElementById("GdvPrice");

To Find Input Elements like Textbox
        var sp = datalist.getElementsByTagName("input");

To Find Elements Like Label
         var Label = datalist.getElementsByTagName("span");

To Find Elements Like DropDownList
         var wp = datalist.getElementsByTagName("select");



To Find Controls using Javascript on click of linkbutton in gridview
  
/Call The below function on clientclick event of linkbutton
    function Sunil(lnk)
         {
            var row = lnk.parentNode.parentNode;          
            var rowIndex = row.rowIndex - 1;

To find label  value
            var ProductId = row.cells[0].children[0].value;
            var ProductName = row.cells[1].getElementsByTagName("span")[0].innerHTML;

To find dropdownlist value      
           var qty = row.cells[7].getElementsByTagName("select")[0];
           qty=qty.options[qty.selectedIndex].text;
      }

Javascript Validation


Validating CheckBoxList using JavaScript

<script 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>

No comments:

Post a Comment