JAVASCRIPT: 2009

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;
}

chitka add

chitak add

How to conver alpabets into upper case using Java script?

The below function is used to convert the aplabets into upper case

function convertToUpper(){
var field1 = document.formName.elementName

field1.value = field1.value.toUpperCase();
}

Example :
If the formName is StudentForm and element name is student id like stud100

Then ,
function convertToUpper(){
var field1 = document.StudentForm.StudentId

field1.value = field1.value.toUpperCase();

}

gives the value as STUD100.

Wednesday, September 2, 2009

How to Select table rows in oracle?

Select Query in Oracle

How to update a table in oracle?

Oracle query for Update all the rows in a table:

Syntax:
UPDATE tablename SET fieldname='value'

Query:

UPDATE STUDENT SET CLASS = 'IV'

You can update a single row by using the where condition. The query is as fallows

UPDATE STUDENT SET CLASS = 'IV' WHERE STUDENT_ID = 100;

How to create a table in Oracle

We can create the table using the Query:

Syntax :

CREATE TABLE tableName (fieldName1 datatype(size), fieldName2 datatype(size) ,........etc);

Example:

CREATE TABLE STUDENT
(
STUDENT_ID NUMBER(5),
STUDENT_NAME VARCHAR(30),
CLASS VARCHAR(5)
);

In the above example STUDENT is the table name, STUDENT_ID , STUDENT_NAME ,
CLASS are the columns of the table student with the respective data types.

Tuesday, September 1, 2009

Check null field using getElemenytById in Java script.

How to check the field is Numeric or Not ?

The small example shows the validation for the field is numeric or not:

<script type='text/javascript'>

function isNumeric(elem, helperMsg){

     var numericExpression = /^[0-9]+$/;

     if(elem.value.match(numericExpression)){

             return true;

     }else{

             alert(helperMsg);

             elem.focus();

             return false;

     }

}

</script>

<form>

Enter Phone No : <input type='text' id='numbers'/>

<input type='button'

     onclick="isNumeric(document.getElementById('numbers'), 'Numbers Only Please')"

     value='Check Field' />

</form>

Monday, August 31, 2009

How to Validate Emain in Java script?

How to check two decimal validation in java script?

Null check function in Javascript.

function checkNullField()

{

var field1 = document.formName.fieldName.value;

if(field1 == '')

{

alert("Field Name is empty");

return false;

}

else

{

return true;

}

Once you call this function in your jsp as return checkNullField(); then this function will return false if the field is empty else it will return true.

How to use javacript files in jsp ?

The javascript files are normal text files which have the .js extention.

Once you create the .js file Yiou can extend the .js file into you html or Jsp pages.

< script language="javascript" src="js/demo.js"/ >

The above tag shows the syntax of how to extend the demo.js into your jsp or html page.

js is the folder name and demo.js is the javascript file name.

How do I enable JavaScript in my browser?

To enable java script in you browser, please follow the instructions below:

Internet Explorer (6.0)

1. Select 'Tools' from the top menu
2. Choose 'Internet Options'
3. Click on the 'Security' tab
4. Click on 'Custom Level'
5. Scroll down until you see section labled 'Scripting'
6. Under 'Active Scripting', select 'Enable' and click OK

Netscape Navigator (4.8)

1. Select 'Edit' from the top menu
2. Choose 'Preferences'
3. Choose 'Advanced'
4. Choose 'Scripts & Plugins'
5. Select the 'Enable JavaScript' checkbox and click OK

Mozilla Firefox (1.0)

1. Select 'Tools' from the top menu
2. Choose 'Options'
3. Choose 'Web Features' from the left navigation
4. Select the checkbox next to 'Enable JavaScript' and click OK

Mozilla Firefox (1.5)

1. Select 'Tools' from the top menu
2. Choose 'Options'
3. Choose 'Content' from the top navigation
4. Select the checkbox next to 'Enable JavaScript' and click OK

Apple Safari (1.0)

1. Select 'Safari' from the top menu
2. Choose 'Preferences'
3. Choose 'Security'
4. Select the checkbox next to 'Enable JavaScript'

Please post if any suggessions and any doubts about this.

Sunday, August 9, 2009

Java script basics

Java script is a Programming language which is helpful in developing the client side validations. Using the java script one can develop the forms for the user or validations for the form. It is very helpful for the developer when they are developing web based applications.