JAVASCRIPT: September 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>