Web and Mobile Apps Codeware: Javascript

Showing posts with label Javascript. Show all posts

Monday, July 28, 2014

Dynamically creating html controls like textbox, labels using JavaScript

HI in this post i will show how to create html controls dynamically using JavaScript:

Below is the sample code :

Example:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function load() {

var t = document.createElement("table"),
tb = document.createElement("tbody"),
tr = document.createElement("tr"),
td = document.createElement("td");

t.style.width = "100%";
t.style.borderCollapse = 'collapse';

var itemLabel = document.createElement("Label");
itemLabel.innerHTML = "Enter Name";
itemLabel.htmlFor = "txtName";
td.appendChild(itemLabel);
tr.appendChild(td);
tb.appendChild(tr);
t.appendChild(tb);

document.getElementById("divContent").appendChild(t);

var t1 = document.createElement("table"),
tb1 = document.createElement("tbody"),
tr1 = document.createElement("tr"),
td1 = document.createElement("td");

t1.style.width = "100%";
t1.style.borderCollapse = 'collapse';

var element = document.createElement("input");
element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "Name");
element.setAttribute("style", "width:200px");
element.setAttribute("id", "txtName");

td1.appendChild(element);
tr1.appendChild(td1);
tb1.appendChild(tr1);
t1.appendChild(tb1);

document.getElementById("divContent").appendChild(t1);

}
</script>
</head>
<body onload="load()">
<form id="form1" runat="server">
<div id="divContent"></div>
</form>
</body>
</html>

Output:

Sunday, April 13, 2014

Sample Code to validate from date and to date in JavaScript/jquery || checkin date and checkout date validation using JavaScript(js)

Javascript :

Below is the code to validate fromdate and todate using javascript.

function validateDate() {

var fromdate, todate, date1, date2;
var chkFrom = document.getElementById('date');
var chkTo = document.getElementById('date2');

fromdate = chkFrom.value;
todate = chkTo.value;

date1 = new Date(fromdate);
date2 = new Date(todate);

if (date2 <= date1) {
alert("To date Should be greater than From date");

return false;
}
return true
}
</script>

Web Page:

calling the above javascript function on button click

<div>
<button type="button" id="btnsubmit" class="btn" onclick="return validateDate();"> Submit</button>
</div>

Friday, March 28, 2014

Using Javascript to create a Datatime picker control in Html

hi in this post lets c how to create a datetime picker in html using Javascript.

1. download the js file using this url.

http://www.javascriptkit.com/script/script2/datetimepick.zip

2. After u download this extract the zip file and after extracting add the .js and image files into your project.

3. Below is the implementation code, you can also get the sample code in the zip file downloaded.

<!DOCTYPE html>
<html>
<head>

<script language="javascript" type="text/javascript" src="datetimepicker.js">
</script>

</head>
<body>

<input type="Text" id="date1" maxlength="25" size="25">

Select a Date : <a href="javascript:NewCal('date1','ddmmmyyyy',true,24)"><img src="images/cal.gif" width="20" height="18"></a>

</body>
</html>

4. Output:

Thursday, October 24, 2013

javascript to allow textbox decimal value upto 2 places only

Below is the function which will validate the text box value and will only allow to enter decimal upto 2 places:

Method 1:

Javascript Function:

function checkDecimal(el){
var ex = /^[0-9]+\.?[0-2]*$/;
if(ex.test(el.value)==false){
alert('Decimal Value upto 2 places allowed !');
el.value = '';
}
}

In textbox properties add onblur and call above javascript function:

<asp:TextBox runat="server" Width="180px" ID="textbox1" onblur="checkDecimal(this);" />

Method 2:

Javascript Function:

function onlyDotsAndNumbers(txt, event) {
var charCode = (event.which) ? event.which : event.keyCode
if (charCode == 46) {
if (txt.value.indexOf(".") < 0)
return true;
else
return false;
}

if (txt.value.indexOf(".") > 0) {
var txtlen = txt.value.length;
var dotpos = txt.value.indexOf(".");
if ((txtlen - dotpos) > 2)
return false;
}

if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;

return true;
}

aspx page:

<asp:TextBox runat="server" Width="180px" ID="textbox1" onkeypress="return onlyDotsAndNumbers(this,event);" />

Friday, September 13, 2013

example to call a javascript function from code-behind or server-code using ScriptManager in asp.net,c#

hi in this post i will show how to call a javascript function from codebehind in asp.net :

Example:

aspx.cs page(codebehind):

protected void testMethod()
{
ScriptManager.RegisterStartupScript(this, GetType(), "displayalertmessage1", "ShowalertMessage();", true);
}

aspx page:
<script type="text/javascript" language="javascript">
function ShowalertMessage() {
alert('hello world!');
}
</script>

Friday, August 23, 2013

hi in this post i will show how to print a particular <div> section using JavaScript in asp.net.

Example:

<script type="text/javascript">
function ClickToPrint() {
docPrint = window.open("", "Print");
docPrint.document.open();
docPrint.document.write('<html><head><title>::PRINT SAMPLE::</title>');
docPrint.document.write('</head><body onLoad="self.print()">');
docPrint.document.write('<table width="900px" border=0><tr><td width=100%><center><font face="windings">');
docPrint.document.write(document.getElementById("PrintDiv").innerHTML);
docPrint.document.write('</font></center></td></tr></table></body></html>');
docPrint.document.close();
}

</script>
<html>
<head runat="server">
<title></title>
</head>
<body>
<div id="PrintDiv">
Hello World ! This is Asp.net.
</div>
<div id="DoNotPrintDiv">
Thanks for visiting this website !!
</div>
<input id="Button1" onclick="ClickToPrint();" type="button" value="Print" class="button" />
</body>
</html>

Wednesday, July 17, 2013

capture dropdownlist value in javascript | Example : Fetch or get asp.net dropdownlist control value in javascript

hi in this post i will show how to capture dropdownlist control value in javascript

Code :

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function getValue() {

var ddl = document.getElementById("<%=DropDownList1.ClientID%>");
var ddlValue = ddl.options[ddl.selectedIndex].value;
alert(ddlValue);

}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Value="1">IT</asp:ListItem>
<asp:ListItem Value="2">Accounts</asp:ListItem>
<asp:ListItem Value="3">Operations</asp:ListItem>
</asp:DropDownList>
<br />
<asp:Button ID="Button1" runat="server" Text="Get DropDown Selected Value" OnClientClick="return getValue();" />
</div>
</form>
</body>
</html>

Result:

Wednesday, May 15, 2013

Allow only numeric values to be entered in a textbox using JavaScript in Asp.net

Hi in this post i will show how to allow only numeric values to be entered into the text-box.

1. On every keypress event in the textbox i will call this below function, this function will just allow you to enter numeric values and rest of the characters other than number will get blocked.

function isNumber(event) {

var KeyBoardCode = (event.which) ? event.which : event.keyCode;
if (KeyBoardCode > 31 && (KeyBoardCode < 48 || KeyBoardCode > 57)) {
return false;
}
return true;
}

Example :

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script language="javascript" type="text/javascript" >
function isNumber(event) {

var KeyBoardCode = (event.which) ? event.which : event.keyCode;
if (KeyBoardCode > 31 && (KeyBoardCode < 48 || KeyBoardCode > 57)) {
return false;
}
return true;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" onkeypress="return isNumber(event)" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>

Tuesday, May 14, 2013

Button Click Refresh Page, Refresh Page Timer, Call Function Timer using Javascript in Asp.net

Hello in this post i will show how to refresh a page in JavaScript.

1. Refresh Page on Button Click :

Call this below function on button click event, This will refresh the page.

function RefreshFunction() {
document.location.reload(true);
}

2. Refresh Page on Timer

Here we will specify the time interval. As per the specified time interval, the page will automatically get refreshed.

setTimeout("location.reload(true);", 4000);

//4000 is 4 seconds.

3. Call a javascript function on regular Intervals

Here we will call a JavaScript function as per the specified time interval.

function RefreshFunction2() {
setTimeout(viewDate(), 2000);
}

function viewDate() {
var todayDate = new Date();
var DateToday = todayDate.getDate()
alert(todayDate);
}

After every 2 seconds viewDate() function will get called.

Example:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">

function RefreshFunction() {
document.location.reload(true);
}

function RefreshFunction2() {

setTimeout(viewDate(), 2000);
}

function viewDate() {
var todayDate = new Date();
var DateToday = todayDate.getDate()
alert(todayDate);
}

alert('Hello World');
setTimeout("location.reload(true);", 4000);

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="RefreshFunction();" />
<asp:Button ID="Button2" runat="server" Text="Button" OnClientClick="RefreshFunction2();" />

</div>
</form>
</body>
</html>