Results 1 to 1 of 1

Thread: dynamic table with javascript

  1. #1
    Join Date
    Apr 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy dynamic table with javascript

    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:

    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
    Last edited by jscheuer1; 04-21-2012 at 08:56 AM. Reason: Format

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •