Add Bookmark in Website using JavaScript in ASP.NET

Inroduction

In this article I will explain how to add bookmark in website using JavaScript in ASP.NET.  we will see link like “Bookmark this Site” in many websites. if we click on this link that will prompts the user with dialog box to add that specified link in favorites list. If we want to add that type functionality in our website then use following code.

Coding

Add_Bookmark.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

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

        function Bookmark()

        {

            title = document.title;

            url = document.URL;

            if (document.all)  //For IE

                window.external.AddFavorite(url, title)

            else if (window.sidebar) //For Mozilla

            {

                window.sidebar.addPanel(title, url, "");

            }

        }

</script>

</head>

<body>

<h3>Add Bookmark in Web Site using javaScript</h3>

    <div>

    <a href="javascript:Bookmark();">Bookmark this page!</a>

    </div>

</body>

</html>

  

Output 1

Click on "Bookmark this page" link

 

Output 2

enter any name and then save in favorites list.

Play With Love Calculator in javaScript

Inroduction

This article describes how to play a love calculator in JavaScript. A love calculator is an application that allows you to know how compatible you and your partner are and how strong shall be the depth of love between you and your dear one.

Coding

Love_Calculator.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript">   

    </script>

    <style type="text/css">

        #Text1

        {

            z-index: 1;

            left: 451px;

            top: 169px;

            position: absolute;

            width: 28px;

            height: 21px;

        }

        #Text2

        {

            z-index: 1;

            left: 437px;

            top: 88px;

            position: absolute;

        }

        .style12

        {

            width: 138px;

        }

        .style13

        {

            width: 178px;

        }

        #Button1

        {

            width: 163px;

        }

        .style14

        {

            width: 184px;

        }

        #result

        {

            width: 27px;

            z-index: 1;

            left: 511px;

            top: 155px;

            position: absolute;

            height: 22px;

        }

    </style>

</head>

<body>

<script type="text/javascript">

    function calculateLove()

    {

        Fname = document.getElementById('firstname').value.toUpperCase();

        FnameLength = Fname.length;

       

        Sname = document.getElementById('secondname').value.toUpperCase();

        SnameLength = Sname.length;

       

        var lovecount=0;

        for(var i=0;i<FnameLength;i++)

        {

            var L1=Fname.substring(i,i+1);

            if(L1=='A') lovecount +=3;

            if(L1=='E') lovecount +=3;

            if(L1=='I') lovecount +=3;

            if(L1=='O') lovecount +=3;

            if(L1=='U') lovecount +=4;

            if(L1=='L') lovecount +=1;        

            if(L1=='V') lovecount +=4;          

        }

            for (var count = 0; count < SnameLength; count++)

            {

               var L2 = Sname.substring(count, count + 1);

                if(L2=='A') lovecount +=3;

                if(L2=='E') lovecount +=3;

                if(L2=='I') lovecount +=3;

                if(L2=='L') lovecount +=3;

                if(L2=='O') lovecount +=4;

                if(L2=='V') lovecount +=1;        

                if(L2=='E') lovecount +=4;

            }

            var Total = 0;

            if (lovecount > 0) Total = 5 - ((FnameLength + SnameLength) / 2)

            if (lovecount > 2) Total = 10 - ((FnameLength + SnameLength) / 2)

            if (lovecount > 4) Total = 20 - ((FnameLength + SnameLength) / 2)

            if (lovecount > 6) Total = 30 - ((FnameLength + SnameLength) / 2)

            if (lovecount > 8) Total = 40 - ((FnameLength + SnameLength) / 2)

            if (lovecount > 10) Total = 50 - ((FnameLength + SnameLength) / 2)

            if (lovecount > 12) Total = 60 - ((FnameLength + SnameLength) / 2)

            if (lovecount > 14) Total = 70 - ((FnameLength + SnameLength) / 2)

            if (lovecount > 16) Total = 80 - ((FnameLength + SnameLength) / 2)

            if (lovecount > 18) Total = 90 - ((FnameLength + SnameLength) / 2)

            if (lovecount > 20) Total = 100 - ((FnameLength + SnameLength) / 2)

            if (lovecount > 22) Total = 110 - ((FnameLength + SnameLength) / 2)

            if (FnameLength == 0 || SnameLength == 0)

                Total = "Error";

            if (Total < 0) Total = 0;

            if (Total > 99) Total = 99;

            var txtresult = document.getElementById("result");

            txtresult.value = Math.floor(Total).toString();

            //alert("Toatal" + Math.floor(Total));

        }

        </script>

    <div style="height: 220px">

        <table style="border-style: ridge; border-color: #FF99FF; width: 33%; height: 187px;">

            <tr>

                <td class="style13">

                    &nbsp;</td>

                <td class="style12" style="color: #FF66FF; font-weight: bold">

                    Love Calculator</td>

                <td class="style14">

                    &nbsp;</td>

            </tr>

            <tr>

                <td class="style13">

                <input id="firstname" type="text" /></td>

                <td class="style12">

                    <img alt="" src="l1.gif" style="height: 98px" /></td>

                <td class="style14">

                <input id="secondname" type="text" /></td>

            </tr>

            <tr>

                <td class="style13">

                    &nbsp;</td>

                <td class="style12">

                    <input id="Button1" style="color: #FF66FF; font-weight: bold;" type="button"

                        value="Calculate" onclick="calculateLove()" /></td>

                <td class="style14">

                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                    <img id="img" alt="" src="love2.jpg" style="height: 60px; width: 112px" /><input id="result"

                        readonly="readonly" type="text" style="border-style: hidden" />&nbsp;</td>

            </tr>

        </table>

    </div>

</body>

</html>

  

Output 1

Enter a name in the first TextBox, as in:

 

Output 2

Enter a name in the second TextBox, as in:

 

Output 3

Click on the calculate button, then see the results as in the following:

 

How Update Record in Database Using Textbox in JavaScript

Note: This program will work only with Internet Explorer.

In this article I will explain how to update a record from database using textbox in JavaScript.

Firstly I am created a database EmpDetail. and Now I am created a table in this database. 

Query Code

CREATE TABLE [dbo].[EmpSalary_Info](

      [id] [int] NULL,

      [name] [varchar](50) NULL,

      [salary] [int] NULL

) ON [PRIMARY]

Now Insert some Data in EmpSalary_Info table. Then use the following procedure.

Complete Program

Update_Record.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript">

        function ShowAll()

        {

            var connection = new ActiveXObject("ADODB.Connection");

            var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=password@123;Provider=SQLOLEDB";

            connection.Open(connectionstring);

            var rs = new ActiveXObject("ADODB.Recordset");

            rs.Open("select * from EmpSalary_Info ", connection);

            rs.MoveFirst();

            var span = document.createElement("span");

            span.style.color = "Blue";

            span.innerText = "  ID " + "  Name " + "   Salary";

            document.body.appendChild(span);

            while (!rs.eof) {

                var span = document.createElement("span");

                span.style.color = "green";

                span.innerText = "\n " + rs.fields(0) + " |  " + rs.fields(1) + " |  " + rs.fields(2);

                document.body.appendChild(span);

                rs.MoveNext();

            }

            rs.close();

            connection.close();

        }

 

        function UpdateRecord()

        {  

            var txtid = document.getElementById('txtid').value;

            var txtname = document.getElementById('txtname').value;

            if (txtid.length != 0 && txtname.length!=0) {

                var connection = new ActiveXObject("ADODB.Connection");

                var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=password@123;Provider=SQLOLEDB";

                connection.Open(connectionstring);

                var rs = new ActiveXObject("ADODB.Recordset");

                rs.Open("update EmpSalary_Info set EmpName = '" + txtname + "' where EmpId=" + txtid,connection);

                alert("Update Record Successfuly");

                txtid.value = " ";

                connection.close();

            }

            else

            {

                alert("Please textbox's value");

            }

 

        }

    </script>

    <style type="text/css">

        #txtname

        {

            z-index: 1;

            left: 230px;

            top: 94px;

            position: absolute;

        }

        #txtid

        {

            z-index: 1;

            left: 230px;

            top: 54px;

            position: absolute;

        }

    </style>

</head>

<body style="height: 89px">

    <div id="show"

        style="font-size: x-large; font-weight: bold; height: 185px; color: #009999;">

       Update Employee Record<p style="font-size: medium; color: #000000;">

    Enter Employee ID&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <input id="txtid" type="text" /></p>

        <p style="font-size: medium; color: #000000;">

            Update Employee Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs

p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </p>

        <input id="txtname" type="text" /><p>

    &nbsp;<input id="ShowRecord" type="button" value="Update" onclick="UpdateRecord()"

        style="font-weight: bold" />&nbsp;

    <input id="showall" type="button" value="Show All Record" onclick="ShowAll()"

        style="font-weight: bold" /></p>

    </div>

    </body>

</html>

   

Output 1

 

Click on Show All Record button

 

Output 2

Enter employee id in textbox which you want to Update from database and then enter update employee name in textbox. than click on Update button

 

Output 3

After Update record, you click on Show All Record button. you will see record updated successfully.

 

Output 4

If you will click on Update button without enter any value in textbox then it will show the error.