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
rg.xml.sax.SAXParseException:The content of elements must consist of well-formed character data or markup.