dynamic table with javascript Options

[dzuritaa]

Well, hello, im new at javasript and i have an assignment for making a dynamic table, i have found some code and the table its dynamic using the input that the user enters in a previews page, this is the number of rows, so the thing its that i have inside the table 7 inputs and i have to evaluate the inputs, since the dynamic table makes the new fields im having trouble validating the new fields since the script its making the new inputs with the same name of the first inputs and i need to know how to make it validates the different inputs

here is the code:

<?php

$valorSeleccionado = $_POST['RadioGroup1'];
$numeroSeleccionado = $_POST['NumeroPersonas'];
$mensualidades = 0;
$pagoMensual = 0;


if($valorSeleccionado == '100000'){
$pagoMensual = 16;
}
if($valorSeleccionado == '50000'){
$pagoMensual = 8;
}
if($valorSeleccionado == '25000'){
$pagoMensual = 4;
}

$mensualidades = $pagoMensual * $numeroSeleccionado;


setlocale(LC_MONETARY, 'en_US');


?>
<div id="cotizador">

<h1>FORMULARIO DE ACEPTACIÓN</h1>
<h1>INGRESA LOS DATOS DE LAS PERSONAS A ASEGURAR:</h1>
<form method = "POST" action = "">
<table cellpadding="0" cellspacing="0" border="0" class="tableCotizador" id="tableCotizador">
<?php
//echo money_format('%i', $valorSeleccionado);
?>
<tr>
<th>NOMBRE</th>
<th>APELLIDO</th>
<th>FEHA DE NACIMIENTO</th>
<th>EDAD</th>
<th>RELACION</th>
<th>CI</th>
<th></th>
</tr>
<td>
<input type="text" name="nombreAsegurado" id="nombreAsegurado" value="" size="7">
</td>
<td>
<input type="text" name="apellidoAsegurado" id="apellidoAsegurado" value="" size="7">
</td>
<td>
<select name="diaNacimiento" id="diaNacimiento">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="21">21</option>
</select>

<select name="mesNacimiento" id="mesNacimiento">
<option value="0">Ene</option>
<option value="1">Feb</option>
<option value="2">Mar</option>
<option value="3">Abr</option>
<option value="4">May</option>
<option value="5">Jun</option>
<option value="6">Jul</option>
<option value="7">Ago</option>
<option value="8">Sep</option>
<option value="9">Oct</option>
<option value="10">Nov</option>
<option value="11">Dic</option>
</select>

<input type="text" name="anioNacimiento" id="anioNacimiento" value="" size="4" maxlength="4" onblur="calcularEdad()">
</td>
<td>
<input type="text" name="edad" id="edad" value="" size="3" maxlength="2" readonly>
</td>
<td>
<input type="text" name="relacionAsegurado" id="relacionAsegurado" value="" size="6">
</td>
<td>
<input type="text" name="cedulaIdentidad" id="cedulaIdentidad" value="" size="10" maxlength="10">
</td>
<td>
<input type="checkbox" name="chk" id="chk"/>
</td>
</tr>

</table>
</form>
<br />
<br />

<div class="total">
<div class="totalRow">
<?php
//echo money_format('%i', $mensualidades*12);
?>
</div>
<div class="iva">
(Incluye IVA e impuestos de ley)
</div>
<input name="" type="image" src="images/btn_procesar.jpg">
</div>
<div class="linksDown">
<a href="#">Pólitica de Privacidad</a> - SECURE SERVER
</div>

</form>
</div>
<div id="botones">
<input type="button" name="agregar" value="Agregar Fila" onclick="addRow('tableCotizador')"/>
<input type="button" name="borrar" value="Borrar Fila" onclick="deleteRow('tableCotizador')"/>
</div>

<script language="javascript">

function addRow(tableCotizador) {

var table = document.getElementById(tableCotizador);
var rowCount = table.rows.length;
var addtotal = <?= $numeroSeleccionado ?>;
var row = table.insertRow(rowCount);
var colCount = 7;
for(var i = 0; i < colCount; i++){
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
newcell.childNodes[0].id += row;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
}
}
}

function deleteRow(tableCotizador) {
try{
var table = document.getElementById(tableCotizador);
var rowCount = table.rows.length - 1;
var row;
var chkbox;
//alert(rowCount);
for(var i = 0; i < rowCount; i++) {
row = table.rows[i];
chkbox = row.cells[0].childNodes[0];
alert(chkbox);
if(null != chkbox && true == chkbox.checked) {
alert("dentro!");
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}

var validaciones = false;
function validarCamposVacios(){
var x = document.getElementById('nombre');
if (x.value == null || x.value == ""){
alert("Debe Ingresar el Nombre del Asegurado");
validaciones = false;
return false;
}
if( isNaN(x.value) == false){
alert("El Nombre no puede contener numeros");
validaciones = false;
return false;
}
validaciones = true;
return true;
}


function calcularEdad(){
var diaSelec = parseFloat(document.getElementById("diaNacimiento").options[document.getElementById("diaNacimiento").selectedIndex].value);
var mesSelec = parseFloat(document.getElementById("mesNacimiento").selectedIndex);
var anioSelec = document.getElementById('anioNacimiento');
var fechaSelec = new Date(anioSelec.value, mesSelec, diaSelec);
var hoy = new Date();
var msec_day = 60*60*24*1000;

if(isNaN(anioSelec.value) == true){
alert("El año no puede contener letras");
validaciones = false;
return false;
}else{
var edad = ((hoy.getTime() - fechaSelec.getTime()) / (msec_day) / 365.0).toFixed(0);
}
}


var cont = <?= $numeroSeleccionado ?>;
for(var i = 1; i < cont; i++){
addRow('tableCotizador');
}



</SCRIPT>


i hope you can help me because this is kind of an emergency

[Christian J]

i need to know how to make it validates the different inputs

Do you just want to check that the textfields are not empty? Then you might simply do:

CODE

var input=document.getElementById('tableCotizador').getElementsByTagName('input');
for(var i=0; i<input.length; i++)
{
    if(
    input[i].type=='text' && input[i].value==null ||
    input[i].type=='text' && input[i].value==''
    )
    {
        alert("Debe Ingresar el Nombre del Asegurado");
        validaciones = false;
    }
}

There are more issues with the page, though. For example, note that modern browsers treat code formatting as textnodes, so from this HTML sample:

CODE

<td>
<input type="text"

this JS:

CODE

childNodes[0]

returns the newline, not the INPUT element. Format the HTML like this instead:

CODE

<td><input type="text"

Here's a missing TR start tag:

CODE

<th></th>
</tr>
<td>