Code Solution Gallery: Javascript

Monday, 3 September 2012

Confirm Dialog box with JavaScript

The Confirmbox has been used for prompt the input from user in form or two options Ok or Cancel, Yes or No etc. It is very useful in programming. i.e. When you save or update a record then a Messagebox has been appeared on screen and prompt his acceptance in form of two options yes or No. If user select Yes then It has been saved or Updated the record or if User select No then It has no make any changes. In HTML Form or aspx webpage, we are used the Javascript confirmbox.

To add a JavaScript ConfirmBox in your webpage, you will followed the below steps :

1. First Open a Text Editor and Type the following html codes :

<html>

<head>

<title>Confirm Box</title>

</head>

<body>

<button onclick="myFunction()">Click Here to Open a Confirmbox</button>

<br /><br /><br />

<input id="Text1" type="text" />

</body>

</html>

2. In above file, we create a Button and Textbox. Give the text to the button as 'Click Here to Open a Confirmbox' and give the id to textbox as 'Text1'. In Button we set a onclilck event. In which we give a function named "myFunction()". This is a Javascript function and used for give the confirmbox functionality.

3. Now we write a script in Bottom of this web page in which we give the functionality of confirmbox as follows :

function myFunction() {

var x;

var r = confirm("Press any Button!");

if (r == true) {

x = "You pressed OK!";

}

else {

x = "You pressed Cancel!";

}

document.getElementById("Text1").value = x;

}

</script>

4. In above script a confirmbox which prompt to user "press any Button" and give to buttons 'Ok' or 'Cancel'. If user click on "Ok" button then a text "You pressed OK!" is show in textbox and either he click on "Cancel" Button then a text "You pressed Cancel!" is shown.

I have given an Example to illustrate this.

Please download the example as follows :

ConfirmBox

Saturday, 1 September 2012

Add Keypress in HTML File with Javascript

In HTML control, If we want to use Keypress event then we use JavaScript code which described as follows

First we Open a Text Editor and type the following codes

<html>

<head>

</head>

<body>

<p>

A function is triggered when the user presses a key in the input field. The function alerts the key pressed.</p>

</body>

</html>

2. In the above file we create a html file and add a Textbox for input any value from user. In the above code we declare a Function "displayResult()" for onkeypress. This event is used for add keypress functionality to textbox Now we add javascript function "displayResult()" as like follows :

function displayResult()

{

var x;

if(window.event) // IE8 and earlier

{

x=event.keyCode;

}

else if(event.which) // IE9/Firefox/Chrome/Opera/Safari

{

x=event.which;

}

keychar=String.fromCharCode(x);

alert("Key " + keychar + " was pressed down");

}

</script>

3. In the above script we used 'event.keyCode' this keyword is used for fetch an assign a keypress value to variable 'x'. In other line we declare a vaiable 'keychar' and then assign the value to it after convert it into character, because 'event.keyCode' keywork only fetch 'ASCII code'. for example if we press 'a' then its ASCII code is 65, which is further convert into string value by using the syntext :