Quote:
Originally Posted by vwphillips
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function addInput(){
var tbl = document.getElementById('tblAddress');
var lastRow = tbl.rows.length;
var row = tbl.insertRow(lastRow);
var cell0 = row.insertCell(0);
var el = document.createElement('input');
el.type='text';
el.name='name[]';
cell0.appendChild(el);
var cell1 = row.insertCell(1);
el = document.createElement('input');
el.type ='text';
el.name='address[]';
cell1.appendChild(el);
el = document.createElement('input');
el.type ='button';
el.value='X';
el.onmouseup=function(){ Remove(this); }
cell1.appendChild(el);
}
function Remove(obj){
while (obj.parentNode){
if (obj.nodeName.toUpperCase()=='TR'){
break;
}
obj=obj.parentNode;
}
obj.parentNode.removeChild(obj);
return;
}
</script>
<form name="form" method="post" action="test.php" onsubmit="return validateForm()">
<table align="center" border="1" id="tblAddress">
<tr>
<td><b>Name</b></td>
<td><b>Address</b></td>
</tr>
<tr>
<td><input type="text" name="name[]"></td>
<td><input type="text" name="address[]"></td>
</tr>
</table>
<p align="center"><input type="button" value="Add" onClick="addInput();"></p>
</form>
</body>
</html>
|
Hi,
I am trying to add an alert prompt if any of the fields are empty. For the first row, i can successfully prompt user. However, if i click on add, those appendchild will not be prompt alert if it is null. Can kindly advice on this? Thanks.
<script type="text/javascript">
function validateForm(){
var x=document.forms["form"]["name[]"].value;
var y=document.forms["form"]["address[]"].value;
if (x=="" || x==null){
alert("Please fill in name field!");
return false;
}else if (y=="" || y==null){
alert("Please fill in address field!");
return false;
}
}
</script>