Java Script

Showing posts with label Java Script. Show all posts

Thursday, April 18, 2013

Get Selected Value on Dropdownlist selectedindexchanged event using JavaScript

==>> In this post I explain how Get Selected Value on Dropdownlist selectedindexchanged event using JavaScript this is help us for get value of dropdown without any page post back in asp .net

We use the onchange event in the java script for get value of dropdown
on Dropdownlist selectedindexchanged event in JavaScript

In the java script we write code like :-

<script type="text/javascript">
function GetName() {
    var name = document.getElementById("ddlName");
    var strname = name.options[name.selectedIndex].text;
    document.getElementById('lName').innerHTML = strname;
    document.getElementById('lValue').innerHTML = name.options[name.selectedIndex].value;
}
    </script>

.ASPX Page Code:-

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Get Selected Value on Dropdownlist selectedindexchanged event using JavaScript</title>

    <script type="text/javascript">
function GetName() {
    var name = document.getElementById("ddlName");
    var strname = name.options[name.selectedIndex].text;
    document.getElementById('lName').innerHTML = strname;
    document.getElementById('lValue').innerHTML = name.options[name.selectedIndex].value;
}
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <table width="50%">
        <tr>
            <td align="right">
                Select Name:
            </td>
            <td>
                <asp:DropDownList ID="ddlName" runat="server" onchange="GetName()">
                    <asp:ListItem Text="Select" Value="0" />
                    <asp:ListItem Text="Subhash" Value="1" />
                    <asp:ListItem Text="Rakesh" Value="2" />
                    <asp:ListItem Text="Satendra" Value="3" />
                    <asp:ListItem Text="Raju" Value="4" />
                    <asp:ListItem Text="Sachin" Value="5" />
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <td align="right" style="font-family: Century Gothic; font-size: 12pt; color: Black">
                Selected Name:-
            </td>
            <td>
                <b>
                    <label id="lName" style="font-family: Century Gothic; font-size: 12pt; color: Aqua" />
                </b>
            </td>
        </tr>
        <tr>
            <td align="right" style="font-family: Century Gothic; font-size: 12pt; color: Black">
                Selected Name value:-
            </td>
            <td>
                <b>
                    <label id="lValue" style="font-family: Century Gothic; font-size: 12pt; color: Aqua"/>
                </b>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

Get Selected Value on Dropdownlist selectedindexchanged event using JavaScript

Thursday, April 11, 2013

Asp.Net Textbox Readonly using JavaScript

==>> In this post i want to make asp .net text box read only using java script .Some time we need this type of functionality in your website so you can easily implement in your website just copy paste blow code on your aspx page :----

1. ASPX PAGE CODE:-


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Asp.Net Textbox Readonly using JavaScript </title>
<script type="text/javascript">
    function SettxtboxReadOnly() {
    var txtName = document.getElementById("txtboxName");
txtName.readOnly = "readonly";
}
</script>
</head>
<body onload=" SettxtboxReadOnly()">
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtboxName" runat="server" Text="Read Only"></asp:TextBox>
</div>
</form>
</body>
</html>

Friday, March 29, 2013

Asp .NET control Enable or Disable using javascript

==>> Create a website in add new page and paste the Code:--

1. ASPX PAGE CODE:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Asp .NET control Enable or Disable using javascript</title>

    <script language="javascript" type="text/javascript">

        function ButtonStatus() {
            var txtvalue = document.getElementById('txtVal');

            if (txtvalue.value == "enable")
                document.getElementById('btnEnable').disabled = false;
            else
                document.getElementById('btnEnable').disabled = true;
        }
    </script>

</head>
<body>
    <div>
        <input type="text" id="txtVal" onkeyup="ButtonStatus(this,'btnEnable')" />
        <input type="button" id="btnEnable" value="Button" disabled="disabled" />
    </div>
</body>
</html>

Hope this will help you.....

Onclick select all Text in Textbox using Javascript in Asp .NET

==>> Create a website in add new page and paste the Code:--

1. ASPX PAGE CODE:-

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Onclick select all Text in Textbox using Javascript in Asp .NET</title>
<script type="text/javascript">
function SelectAll(id) {
document.getElementById(id).focus();
document.getElementById(id).select();
}
</script>
</head>
<body>
<div>
Enter Strengths :<br/>
<input type="text" id="TxtStrengths" onclick="SelectAll('TxtStrengths');" style="width:200px" value = "I am very confident and a good player of cricket" /><br />
Hobbies :<br/>
<textarea rows="5" cols="23" id="TxtHobbies" onclick="SelectAll('TxtHobbies');" style="width:200px" I like playing cricket. </textarea>
</div>
</body>
</html>

Hope this will help you....

Wednesday, March 20, 2013

Change Row Color on Mouse Over and Highlight gridview rows on mouseover using JavaScript in C# Asp .Net

==>> Create a table in SQL Employee and create a website in add new page and paste the Code:--

1. ASPX PAGE CODE:-

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Asp .Net Gridview row color change on Mouse Over </title>
<script type="text/javascript">
var originalgridcolor;
function FnColorChangeMouseOver(element) {
originalgridcolor = element.style.backgroundColor;
element.style.backgroundColor = '#94a8ff';
element.style.cursor = 'pointer';
element.style.textDecoration = 'underline';
}
function FnColorChangeMouseOut(element) {
element.style.backgroundColor = originalgridcolor;
element.style.textDecoration = 'none';

}
</script>
</head>
<body>
<form id="FrmMouseOver" runat="server">
<div>
<asp:GridView runat="server" ID="EmpTestGrid" AutoGenerateColumns="false"
HeaderStyle-BackColor="#EB94FF" HeaderStyle-ForeColor="White"
onrowdatabound="EmpTestGrid_RowDataBound">

<Columns>
<asp:BoundField DataField="EmpName" HeaderText="Name" />
<asp:BoundField DataField="FName" HeaderText="Father Name" />
<asp:BoundField DataField="EmpEmail" HeaderText="Email" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>

2. ASPX.CS PAGE CODE:-

using System;
using System.Data;
using System.Data.SqlClient;

protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
BindGrid();
}
}
protected void EmpTestGrid_RowDataBound(object sender, GridViewRowEventArgs e)
{
if(e.Row.RowType== DataControlRowType.DataRow)
{
e.Row.Attributes["onmouseover"] = "javascript:FnColorChangeMouseOver(this)";
e.Row.Attributes["onmouseout"] = "javascript:FnColorChangeMouseOut(this)";
}
}
protected void BindGrid()
{
SqlConnection con =
new SqlConnection("Data Source=Subhash;Integrated Security=true;Initial Catalog=EmployeeTest");
con.Open();
SqlCommand sqlcmd = new SqlCommand("select * from Employee", con);
sqlcmd.ExecuteNonQuery();
SqlDataAdapter sqlda = new SqlDataAdapter(sqlcmd);
DataSet ds = new DataSet();
sqlda.Fill(ds);
EmpTestGrid.DataSource = ds;
EmpTestGrid.DataBind();
con.Close();
}

Hope this help you

Print Grid View Data Using Java Script C# Asp .Net

==>> Create a table in SQL Employee and create a website in add new page and paste the Code:--

1. ASPX PAGE CODE:-

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Print Gridview Data</title>
<script type="text/javascript">
function Print() {
var PrintGrid = document.getElementById('<%=EmpGrid.ClientID %>');
PrintGrid.border = 0;
var PrintGridWindow = window.open('', 'PrintGridViewData', 'left=100,top=100,width=1000,height=1000,tollbar=0,scrollbars=1,status=0,resizable=1');
PrintGridWindow.document.write(PrintGrid.outerHTML);
PrintGridWindow.document.close();
PrintGridWindow.focus();
PrintGridWindow.print();
PrintGridWindow.close();
}
</script>
</head>
<body>
<form id="FmGridPrint" runat="server">
<div>
<b>Print Gridview</b><br /><br />
<asp:GridView ID="EmpGrid" runat="server" >

</asp:GridView>
<input type="button" id="btnPrint" value="Print" onclick="Print()" />
</div>
</form>
</body>
</html>

2. ASPX.CS PAGE CODE:-

using System;
using System.Data;
using System.Data.SqlClient;

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

protected void BindGrid()
{
using (SqlConnection con = new SqlConnection("Initial Catalog=EmployeeTest;Data Source=SUBHASH;Integrated Security=true"))
{
con.Open();
SqlCommand cmd = new SqlCommand("Select * from Employee", con);
SqlDataReader dr = cmd.ExecuteReader();
EmpGrid.DataSource = dr;
EmpGrid.DataBind();
con.Close();
}
}

Thursday, March 29, 2012

Select All Check Box In Asp .Net With Java Script

Add This Code In Header Section Of your Aspx Page
1.

   1:  <script type="text/javascript">

   2:     function SelectAllAndDeSelectAllCheckBox(Chk)

   3:  {

   5:        var oItem = Chk.children;

   6:      var theBox= (spanChk.type=="checkbox") ? Chk: Chk.children.item[0];

   7:       xState=theBox.checked;

   8:       elm=theBox.form.elements;

    9:       for(i=0;i   10:    
  11:           if(elm[i].type=="checkbox" && elm[i].id!=theBox.id)  
  13:           {   
  16:             if(elm[i].checked!=xState)    
  19:           }
  20:  script>

After The Add this code in Header Section You Need take A Grid View and Write This Code ..

1:

   2:  <asp:templatefield headertext="Select">

   3:    <headertemplate>

   4:    <input blogger_onclick="javascript:SelectAllAndDeSelectAllCheckBox(this);"

         id="chkAll" runat="server" type="checkbox">

   5:   headertemplate>

   6:    <itemtemplate>

   7:   <asp:checkbox blogger_oncheckedchanged="CheckBox1_CheckedChanged"

         id="CheckBox1" runat="server" autopostback="true">

   8:    asp:checkbox>itemtemplate>

   9:   asp:templatefield>




Hope This Help You

.NET Subhash Jakhar C#.NET ASP.NET,GridView,DropDownList,,AJAX,JavaScript,JQuery,Crystal Report

Pages