Friday, April 9, 2010

Javscript code for not allowing charecters in text box

Some times we may have the requirement to not allow the characters into text input such as rupees or telephone no. In this case calling the below function onkeypress event is the better practice. This method doesn't allow the user to enter the characters except numerals and decimal value.

var isNS4 = (navigator.appName=="Netscape")?1:0;
function checkCharacter(event){
        if(!isNS4){
            if(event.keyCode == 8 || event.keyCode == 0 ) return true;
            if(event.keyCode < 46 || event.keyCode > 57 ) {
                event.returnValue = false;               
            }
        }
        else{
            if(event.which == 8 || event.which == 0 ) return true;
            if(event.which < 46 || event.which > 57 ) {
                return false;               
            }
        }
    }

Friday, March 12, 2010

Sorry to all.................

From the last few days i was busy with the work so that i was unble to post the posts on this page...


I think this will discuraging to you but in the soon i am going to update this blog with new things.....

Friday, September 25, 2009

How to create Dynamic rows in javascript

Please create a html file with this code and check the functionality:


<html>
<head>
<script LANGUAGE="JavaScript">
function addRow(tableID){
    var table = document.getElementById(tableID);
   
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
   
    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "text";
    element1.name = "empNo";
    cell1.appendChild(element1);
   
    var cell2 = row.insertCell(1);
    var element2 = document.createElement("input");
    element2.type = "text";
    cell2.appendChild(element2);
   
    var cell3 = row.insertCell(2);
    var element3 = document.createElement("textarea");
    element3.setAttribute("name","mytextarea");
    element3.setAttribute("cols","10");
    element3.setAttribute("rows","1");
    cell3.appendChild(element3);
}
function deleteRow(tableID) {

    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if(rowCount > 1) {
    table.deleteRow(rowCount - 1);
}

}
</script>
</head>
<body>
<form name="f1" id="f1">
<input type="button"value="Add" onclick="addRow('datatable')">
<table id="datatable" cellspacing="0" border="1" bgcolor="#738711">
<tbody>
<tr>
<td><input type="text" ></td><td><input type="text"></td><td><textarea rows="1" cols="10"></textarea></td>

<td><a href="javascript:void(0);" onclick="deleteRow('datatable')" >Remove</a></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

Dynamic rows in Javascript

Create a demo.html with this code and try to see the functionality

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
function addRow(div,value,x){

    var ni = document.getElementById(div);
    var numi = document.getElementById(value);
    var num = (document.getElementById(value).value -1)+ 2;
    numi.value = num;
   
    var divIdName = "my"+num+x+"Div";
    var newdiv = document.createElement(div);
    newdiv.setAttribute("id",divIdName);
    newdiv.innerHTML = "<table width=\'100%\' class=\'listTable\' >"
                        +"<tr class=\'listTR"+(num%2)+"\' onMouseOver=this.style.backgroundColor=\'DEDEBE\' onMouseOut=this.style.backgroundColor=\'\'>"
                        +"<td><input type='text' name='studNo'/></td>"
                        +"<td><input type='text' name='studName'/></td>"
                        +"<td><a href=\"javascript:;\" class=\"menu\" onclick=\"removeEvent(\'"+divIdName+"\',\'"+div+"\')\">Remove</a></td>"
                        +"</tr></table>";
    ni.appendChild(newdiv);
}
function removeEvent(divNum,div){
    var d = document.getElementById(div);
    var olddiv = document.getElementById(divNum);
    d.removeChild(olddiv);
}
</script>
</head>
<body>
<form action="">
    <table>
    <tr bgcolor="#737328"><td>
        <table>
        <tr><td>Student No</td><td>Student Name</td><td>Actions</td></tr>
        <tr><td><input type="text" name="studNo"/></td><td><input type="text" name="studName"/></td><td> </td></tr>
        </table>
        </td></tr>
        <tr bgcolor="#737328"><td>
            <input type="hidden" name="theValue" id="theValue" value="0"/>
        <div id="myDiv"></div>
        </td></tr>
        <tr>
        <td><p><a href="javascript:;" onclick="addRow('myDiv','theValue','');"><strong>Add More</strong></a></p></td>
        </tr>
    </table>
</form>
</body>
</html>

Thursday, September 17, 2009

How to submit form in javascript

function submitForm1()
{
document.formName.action = "storeEmployee.do" //This is struts action
document.formName.submit();

}

The action is specified in the fist line and submit() submits the action.
You can specify the action in the form tag also as shown below.

<form name="formName" action= "storeEmployee.Do" />

This type of submit generally used in the fallowing situations.
1. When you want to submit the request from hyperlink
2. One action is already assigned to the submit button of the form then another submit button can use javascript submit() method as shown above

Sunday, September 6, 2009

How to check the field has charecters or not in Java script?

The below function shows the how to check the string contains specified characters or not

function checkChars(){
var val = document.formName.elementName.value;
var chars = '.#$%^&!)(_ ';
var flag = false;
for(i=0; i ch_data = val.charAt(i);
for(j=0; j if(ch_data==chars.charAt(j)){
flag = false;
break;
}
flag=true;
}
if(flag){
return false;
}
}
return true;
}