aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes Dynamic rows validation from javascript Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Dynamic rows validation from javascript" Watch "Dynamic rows validation from javascript" New topic
Author

Dynamic rows validation from javascript

jonnabhatla venkata
Greenhorn

Joined: Feb 10, 2009
Posts: 24


Hi All,

I have developed one html page with javascript which will add dynamic row when I click on the AddRow button.
By default page has 3 rows and we can add according to our requirement.


In the following snippet there is a validation through checkpostal(this).

<tr>
<td><INPUT TYPE="checkbox" NAME="checkbox1" value = "Office"/></td>
<td><INPUT TYPE="text" NAME="textfield1" id = "phonefield1" onblur="javascript:checkpostal(this)"/></td>
<td><INPUT TYPE="text" NAME="textfield2" id = "extfield1"/></td>
<td><INPUT TYPE="text" NAME="textfield3" id = "typefield1"/></td>
</tr>

javascript function :

Here I dont know how to pass this from javascript. the following code call the javascript function but it is
not able to validate the text field.

textnode2.onblur = checkpostal;

// The following function add new row to the existing table in the html page.
function addRow(id){
//alert("hi");
var checkcountobj = document.getElementById("checkboxcount");
var count = checkcountobj.value;
//alert("count "+count);
if(count == 'null' || count == ''){
count = 3;
}
count++;
checkcountobj.value = count;
//alert(count);
tabBody=document.getElementById(id).getElementsByTagName("TBODY")[0];

//alert(tabBody);
row=document.createElement("TR");
cell1 = document.createElement("TD");
cell2 = document.createElement("TD");
cell3 = document.createElement("TD");
cell4 = document.createElement("TD");

textnode1=document.createElement("INPUT");
textnode1.setAttribute("type", "checkbox");
textnode1.setAttribute("name", "checkbox"+count);


//textnode1.type = 'checkbox';
//textnode1.name = 'checkbox' + count;
//textnode1.size = '15';



textnode2=document.createElement("INPUT");
textnode2.setAttribute("type", "text");
textnode2.setAttribute("name", "textfield1");
textnode2.setAttribute("id", "phonefield"+count+"");
//textnode2.setAttribute('onblur', 'checkpostal(this)');
textnode2.onblur = checkpostal;


textnode3=document.createElement("INPUT");
textnode3.setAttribute("type", "text");
textnode3.setAttribute("name", "textfield2");
textnode3.setAttribute("id", "extfield"+count+"");


textnode4=document.createElement("INPUT");
textnode4.setAttribute("type", "text");
textnode4.setAttribute("name", "textfield3");
textnode4.setAttribute("id", "typefield"+count+"");




cell1.appendChild(textnode1);
cell2.appendChild(textnode2);
cell3.appendChild(textnode3);
cell4.appendChild(textnode4);
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
row.appendChild(cell4);
tabBody.appendChild(row);

}

// the following function validate the textfiled.

function checkpostal(textVal){
alert("checkpostal");
var re5digit = /^\(\d{3}\)\d{3}\-\d{4}$/; // /^(\+\d)*\s*(\(\d{3}\)\s*)*\d{3}(-{0,1}|\s{0,1})\d{2}(-{0,1}|\s{0,1})\d{2}$/;
// /^\d{3}$/ //regular expression defining a 5 digit number


var Value = textVal;
if(Value.value != '' && Value.value.search(re5digit) == -1 ){
alert("Phone number should be in the following format \n (XXX)XXX-XXXX ");
Value.style.background ="red" ;
}else{
Value.style.background = "";
}
}



Full source code :
===========



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<title>Insert title here</title>

<script type="text/javascript">

function add(){
//alert("lrosjma");
//document.write("krishna");
//document.form1.table1.newrow = '
//document.getElementById("");

var checkcountobj = document.getElementById("checkboxcount");
var count = checkcountobj.value;
//alert("count "+count);
if(count == 'null' || count == ''){
count = 3;
}
count++;
checkcountobj.value = count;
var d=document.getElementById("div");
alert("inside");
d.innerHTML+="<tr><td><INPUT TYPE='checkbox' NAME='checkbox"+count+"'/></td><td> <INPUT TYPE='text' NAME='textfield1' id = 'phonefield"+count+"' onblur='javascript:checkpostal(this)'/></td><td> <INPUT TYPE='text' NAME='textfield2' id = 'extfield"+count+"' /></td><td> <INPUT TYPE='text' NAME='textfield3' id = 'typefield"+count+"'/></td></tr>";

}

function addRow(id){
//alert("hi");
var checkcountobj = document.getElementById("checkboxcount");
var count = checkcountobj.value;
//alert("count "+count);
if(count == 'null' || count == ''){
count = 3;
}
count++;
checkcountobj.value = count;
//alert(count);
tabBody=document.getElementById(id).getElementsByTagName("TBODY")[0];

//alert(tabBody);
row=document.createElement("TR");
cell1 = document.createElement("TD");
cell2 = document.createElement("TD");
cell3 = document.createElement("TD");
cell4 = document.createElement("TD");

textnode1=document.createElement("INPUT");
textnode1.setAttribute("type", "checkbox");
textnode1.setAttribute("name", "checkbox"+count);


//textnode1.type = 'checkbox';
//textnode1.name = 'checkbox' + count;
//textnode1.size = '15';



textnode2=document.createElement("INPUT");
textnode2.setAttribute("type", "text");
textnode2.setAttribute("name", "textfield1");
textnode2.setAttribute("id", "phonefield"+count+"");
//textnode2.setAttribute('onblur', 'checkpostal(this)');
textnode2.onblur = checkpostal;

//var textonblur = textnode2.onblur ;
//textonblur = checkpostal;
//textonblur.setAttribute(this);

textnode3=document.createElement("INPUT");
textnode3.setAttribute("type", "text");
textnode3.setAttribute("name", "textfield2");
textnode3.setAttribute("id", "extfield"+count+"");


textnode4=document.createElement("INPUT");
textnode4.setAttribute("type", "text");
textnode4.setAttribute("name", "textfield3");
textnode4.setAttribute("id", "typefield"+count+"");




cell1.appendChild(textnode1);
cell2.appendChild(textnode2);
cell3.appendChild(textnode3);
cell4.appendChild(textnode4);
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
row.appendChild(cell4);
tabBody.appendChild(row);

}

function reload(){
var checkcountobj = document.getElementById("checkboxcount");
alert(checkcountobj);
var count = checkcountobj.value = 3;
}

function validatePhoneNumber(){
var checkcountobj = document.getElementById("checkboxcount");
//alert(checkcountobj.value);
var count = checkcountobj.value;
var empty
for(var i = 1 ; i <= count ; i++) {
var Value = document.getElementById("phonefield"+i);
if(Value.value == ''){
//alert("Phone number is required");
Value.style.background ="red" ;
}
}

}

function checkpostal(textVal){
var re5digit = /^\(\d{3}\)\d{3}\-\d{4}$/;

var Value = textVal;
if(Value.value != '' && Value.value.search(re5digit) == -1 ){
alert("Phone number should be in the following format \n (XXX)XXX-XXXX ");
Value.style.background ="red" ;
}else{
Value.style.background = "";
}


}

function removeRowFromTable()
{
var tbl = document.getElementById('myTable');
var lastRow = tbl.rows.length;
if (lastRow > 4) tbl.deleteRow(lastRow - 1);
}


</script>


</head>
<body>

<FORM name = "form1" action = "/AjaxSample/SampleServlet" method = "get">
<input type = "hidden" name="checkboxcount" id="checkboxcount" value = "3"/>

<table id="myTable" border = "1" >
<tbody>
<tr>
<th>Delete</th>
<th>Phone</th>
<th>Ext</th>
<th>Type</th>
</tr>

<tr>
<td><INPUT TYPE="checkbox" NAME="checkbox1" value = "Office"/></td>
<td><INPUT TYPE="text" NAME="textfield1" id = "phonefield1" onblur="javascript:checkpostal(this)"/></td>
<td><INPUT TYPE="text" NAME="textfield2" id = "extfield1"/></td>
<td><INPUT TYPE="text" NAME="textfield3" id = "typefield1"/></td>
</tr>

<tr>
<td><INPUT TYPE="checkbox" NAME="checkbox2" value = "Fax"/></td>
<td><INPUT TYPE="text" NAME="textfield1" id = "phonefield2" onblur="javascript:checkpostal(this)"/></td>
<td><INPUT TYPE="text" NAME="textfield2" id = "extfield2"/></td>
<td><INPUT TYPE="text" NAME="textfield3" id = "typefield2"/></td>
</tr>

<tr>
<td><INPUT TYPE="checkbox" NAME="checkbox3" value = "Billing"/></td>
<td><INPUT TYPE="text" NAME="textfield1" id = "phonefield3" onblur="javascript:checkpostal(this)"/></td>
<td><INPUT TYPE="text" NAME="textfield2" id = "extfield3" /></td>
<td><INPUT TYPE="text" NAME="textfield3" id = "typefield3" /></td>
</tr>

</tbody>
</table>

<INPUT TYPE=button VALUE="Add" onclick="javascript:addRow('myTable')"/>
<INPUT TYPE=button VALUE="Remove" onclick="javascript:removeRowFromTable()"/>
<INPUT TYPE=button VALUE="OK"/>
<INPUT TYPE=button VALUE="Cancel"/>

</FORM>


</body>
</html>


Any help appreciated...

Jonnabhatla venkata
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

'this' is just a reference to the element that triggers the event.



GenRocket - Experts at Building Test Data
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
 
subject: Dynamic rows validation from javascript