Win a copy of Beginning Java 17 Fundamentals: Object-Oriented Programming in Java 17 this week in the Java in General forum!
  • 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:
  • Tim Cooke
  • Campbell Ritchie
  • Ron McLeod
  • Liutauras Vilda
  • Jeanne Boyarsky
Sheriffs:
  • Junilu Lacar
  • Rob Spoor
  • Paul Clapham
Saloon Keepers:
  • Tim Holloway
  • Tim Moores
  • Jesse Silverman
  • Stephan van Hulst
  • Carey Brown
Bartenders:
  • Al Hobbs
  • Piet Souris
  • Frits Walraven

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.

 
WHAT is your favorite color? Blue, no yellow, ahhhhhhh! Tiny ad:
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
reply
    Bookmark Topic Watch Topic
  • New Topic