• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Dynamic rows validation from javascript

 
Greenhorn
Posts: 24
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator


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
 
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
'this' is just a reference to the element that triggers the event.

 
reply
    Bookmark Topic Watch Topic
  • New Topic