Let's say your
Add button generates rows in the DOM similar to the ones in the demo below.
When you click the
Submit button, the cells containing invalid selections in their <select>s will have a red background colour.
You can add as many rows and <select>s to each row as you like without having to touch the javascript.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css"></style>
<script type="text/javascript">
function validateForm(){
tbodyInputsO = document.getElementById('tbodyInputs');
var isDataValid = true;
for(i=0; i < tbodyInputsO.rows.length; i++){
var selO = tbodyInputsO.rows[i].getElementsByTagName('select');
for(j=0; j < selO.length; j++){
selO[j].parentNode.style.backgroundColor = 'white';
if(selO[j].selectedIndex == 0){
selO[j].parentNode.style.backgroundColor = 'red';
isDataValid = false;
}
}
}
if(!isDataValid){
alert('Red cells have invalid selections');
}
return isDataValid;
}
</script>
</head>
<body>
<form action="" method="post" onsubmit=" return validateForm();">
<table id="tbl1" cellspacing="5" cellpadding="3" border="1">
<tbody id="tbodyInputs">
<tr>
<td>
<select name="selFrom[]">
<option value="" selected="selected">Select From Location</option>
<option value="from_1">From 1</option>
<option value="from_2">From 2</option>
</select>
</td>
<td>
<select name="selTo[]">
<option value="" selected="selected">Select To Location</option>
<option value="from_1">To 1</option>
<option value="from_2">To 2</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="selFrom[]">
<option value="">Select From Location</option>
<option value="from_1">From 1</option>
<option value="from_2">From 2</option>
</select>
</td>
<td>
<select name="selTo[]">
<option value="">Select To Location</option>
<option value="from_1">To 1</option>
<option value="from_2">To 2</option>
</select>
</td>
</tr>
</tbody>
</table>
<div>
<input type="submit" value="Submit" />
</div>
</form>
</body>
</html>