dynamic table with javascript |
dynamic table with javascript |
dzuritaa |
Apr 20 2012, 05:53 PM
Post
#1
|
Group: Members Posts: 1 Joined: 20-April 12 Member No.: 16,958 |
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 |
Apr 21 2012, 11:54 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
QUOTE 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> |
Lo-Fi Version | Time is now: 19th April 2024 - 07:27 PM |