JavaScript - Guardar registros tabla dinámica y mostrarlos con Javascript para val

Pos: 201

Val: 12

Guardar registros tabla dinámica y mostrarlos con Javascript para val

Publicado por miguel (4 intervenciones) el 28/05/2019 00:45:11

Hola amigos: tengo una tabla en la que añado o elimino mediante botones las filas con sus correspondientes campos, conformando así una matriz de "i" filas x "j" columnas. Todos los inputs del formulario son procesados como un array y guardados en una B.D tal cual sin validarlos. El problema lo tengo cuando quiero validarlos antes de enviarlos a la B.D , que lo hago llamando a la función correspondiente en JavaScript. El código solo me llega a mostrar el primer registro de la tabla esto es, el bucle que recorre el array, vuelve a mostrar siempre los datos de la primera fila de la tabla y no encuentro el motivo del por qué el resto de filas no. Les estaría muy agradecido me echaran una mano. Gracias.

--------------------- Codigo javascript --------------------------------------

function agregarFila(){

document.getElementById("tablainvitados").insertRow(-1).innerHTML =

'<td><input id="nomape_nosocio"  type=text name=nomape_nosocio[]/></td><td><input id="dni_nosocio"  type=text  name=dni_nosocio[]/></td>';

function eliminarFila(){

  var table = document.getElementById("tablainvitados");

  var rowCount = table.rows.length;

  //console.log(rowCount);

  if(rowCount <= 1)

    alert('No se puede eliminar el encabezado');

  else

    table.deleteRow(rowCount -1);

function pregunta_Validar_Campos(){

var aArray= [document.getElementById('nomape_nosocio').value,document.getElementById('dni_nosocio').value];

 var table = document.getElementById("tablainvitados");

  var rowCount = table.rows.length;

 // Recorremos todas las filas y columnas de la tabla con el objetivo de recuperar y validar todos los campos introducidos en la tabla

         for (var i = 0; i < rowCount-1; i++) {

			for (var j= 0; j < aArray.length; j++) {

    document.write( "El valor de la posición [" + i+ "][" +j+ "] es [" +aArray[j] + "]<br/>" );  // aqui solo testea los valores recibidos llegando solo los campos de la primera fila

	    if (confirm('Los datos serán guardados en la Base de Datos. ¿Estás seguro de realizar esta acción?'))

	   {document.Actualizar.submit() }

--------------------------------- Código Tabla dinámica (html)------------------------------------------

<form name="Actualizar" action="" method="POST">

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">

  <div class="row">

    <table border="1" class="table" id="tablainvitados">

      <thead class="thead-dark">

        <tr>

                <th>Nombre y Apellidos</th>

				<th>NIF</th>

        </tr>

<td><input id="nomape_nosocio" type=text  name=nomape_nosocio[] value="" /></td>

<td><input id="dni_nosocio" type=text name=dni_nosocio[] value=""/></td>

      </tr>

      </thead>

</table>

    <div class="form-group">

      <button type="button" class="btn btn-primary mr-2" onclick="agregarFila()">Agregar Fila</button>

      <button type="button" class="btn btn-danger mr-2" onclick="eliminarFila()">Eliminar Fila</button>

      <button type="button" class="btn btn-success" onclick="pregunta_Validar_Campos()">Actualizar Datos</button>

 </div>

  </div>

</form>

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 1

Val: 3.506

Guardar registros tabla dinámica y mostrarlos con Javascript para val

Publicado por joel (895 intervenciones) el 28/05/2019 08:51:08

Hola Miguel, tu problema es que esto:

document.getElementById('nomape_nosocio').value

solo te devuelve el primer valor, no todos los valores... ya que los estas obteniendo a través del id repetido, por lo que solamente obtiene el primer valor.

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 201

Val: 12

Guardar registros tabla dinámica y mostrarlos con Javascript para val

Publicado por miguel (4 intervenciones) el 28/05/2019 13:09:45

Gracias por tu respuesta pero ya se que ese es el problema, la cuestión es COMO obtengo el resto de los valores, es decir las siguientes filas. Seria recorriendo el array asignándole una nueva variable o array autoincremental o algo asi pero no se que cual seria la sintaxis o el código , he probado varias manera pero no sale.

Valora esta respuesta

Comentar

Pos: 1

Val: 3.506

Guardar registros tabla dinámica y mostrarlos con Javascript para val

Publicado por joel (895 intervenciones) el 28/05/2019 19:14:51

Miguel, si tabularas bien tu código te darías cuenta de que tienes un <div> sin cerrar y te falta abrir <tr>

te he modificado tu código para ponerlo correctamente, lo he tabulado y he añadido una función para obtener los datos y ponerlos en un array de la forma que tu querías... espero que te sirva

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>

<form name="Actualizar" action="" method="POST">

    <div class="container">

        <div class="row">

            <table border="1" class="table" id="tablainvitados">

                <thead class="thead-dark">

                    <tr>

                        <th>Nombre y Apellidos</th>

                        <th>NIF</th>

                    </tr>

                </thead>

                <tr>

                    <td><input type="text"  name='nomape_nosocio' value=""></td>

                    <td><input type="text" name="dni_nosocio" value=""></td>

                </tr>

            </table>

            <div class="form-group">

                <button type="button" class="btn btn-primary mr-2" onclick="agregarFila()">Agregar Fila</button>

                <button type="button" class="btn btn-danger mr-2" onclick="eliminarFila()">Eliminar Fila</button>

                <button type="button" class="btn btn-success" onclick="pregunta_Validar_Campos()">Actualizar Datos</button>

            </div>

        </div>

    </div>

</form>

<script>

function agregarFila(){

    document.getElementById("tablainvitados").insertRow(-1).innerHTML =

    '<td><input type="text" name="nomape_nosocio"></td><td><input type="text" name="dni_nosocio"></td>';

function eliminarFila(){

    var table = document.getElementById("tablainvitados");

    var rowCount = table.rows.length;

    //console.log(rowCount);

    if(rowCount <= 1)

        alert('No se puede eliminar el encabezado');

    else

        table.deleteRow(rowCount -1);

function pregunta_Validar_Campos(){

    var aArray=obtenerValoresInput();

    var table = document.getElementById("tablainvitados");

    // Recorremos todas las filas y columnas de la tabla con el objetivo de recuperar y validar todos los campos introducidos en la tabla

    for (var i = 0; i < aArray.length; i++) {

        for (var j= 0; j < 2; j++) {

            console.log( "El valor de la posición [" + i+ "][" +j+ "] es [" +aArray[i][j] + "]<br/>" );  // aqui solo testea los valores recibidos llegando solo los campos de la primera fila

    if (confirm('Los datos serán guardados en la Base de Datos. ¿Estás seguro de realizar esta acción?')) {

        document.Actualizar.submit();

function obtenerValoresInput() {

    let miArray=[]

    const trs=document.querySelectorAll("#tablainvitados tbody tr");

    for (let tr of trs) {

        const inputs=tr.querySelectorAll("input");

        miArray.push([inputs[0].value, inputs[1].value]);

    return miArray;

</script>

Valora esta respuesta

Comentar

Pos: 201

Val: 12

Guardar registros tabla dinámica y mostrarlos con Javascript para val

Publicado por miguel (4 intervenciones) el 30/05/2019 00:58:34

Gracias amigo, efectivamente al reducir el código para poder ilustrar mejor el problema, me lleve por delante algunas etiquetas. Sin embargo he probado tus recomendaciones pero no me funciona. Realizando la traza del script se para cuando se llama a:

function obtenerValoresInput() {

    let miArray=[]

    const trs=document.querySelectorAll("#tablainvitados tbody tr");

    for (let tr of trs) {

        const inputs=tr.querySelectorAll("input");

        miArray.push([inputs[0].value, inputs[1].value]);

    return miArray;

No entiendo muy bien como construyes el array bidimensional , ¿ podrías ser mas explicito ?.

Valora esta respuesta

Comentar

Pos: 1

Val: 3.506

Guardar registros tabla dinámica y mostrarlos con Javascript para val

Publicado por joel (895 intervenciones) el 30/05/2019 08:46:58

A mi me funciona perfectamente Miguel... cuando le das al botón "Actualizar Datos", antes de pulsar nada mas, en la consola del navegador te aparecen todos los valores correctamente.

En esa función, lo que hago es...

function obtenerValoresInput() {

    let miArray=[]

    // Obtengo todos los tr de la tabla

    const trs=document.querySelectorAll("#tablainvitados tbody tr");

    // Recorro cada no de los tr de la tabla

    for (let tr of trs) {

        // Obtengo los inputs que hay dentro del tr

        const inputs=tr.querySelectorAll("input");

        // añado al array el valor de cada input que hay dentro del tr

        miArray.push([inputs[0].value, inputs[1].value]);

    return miArray;

Valora esta respuesta

Comentar

Pos: 201

Val: 12

Guardar registros tabla dinámica y mostrarlos con Javascript para val

Publicado por miguel (4 intervenciones) el 04/06/2019 22:03:06

No lo dudo, pero lo he probado en la propia web y no le gusta, el por qué no lo se, uso wordpress 5.2.1 , quizás sea las bibliotecas de java ???? . Me apunto tu código para seguir investigando, no obstante dejo aquí esta otra mandera que si me ha funcionado por si alguien tiene el mismo problema y le sirve.

function agregarFila(){

document.getElementById("tablainvitados").insertRow(-1).innerHTML =

 '<td><input id="nomape_nosocio" class="nomape_nosocio"  type=text name=nomape_nosocio[]/></td><td><input id="dni_nosocio"  type=text class="dni_nosocio" name=dni_nosocio[]/></td>';

function eliminarFila(){

  var table = document.getElementById("tablainvitados");

  var rowCount = table.rows.length;

  //console.log(rowCount);

  if(rowCount <= 1)

    alert('No se puede eliminar el encabezado');

  else

    table.deleteRow(rowCount -1);

function pregunta_Validar_Campos(){

// selecciona TODOS los campos de la tabla por clase

 var nomapes = document.querySelectorAll(".nomape_nosocio");

    var dnis = document.querySelectorAll(".dni_nosocio");

// Cada campo es convertido a un array bidimensional

var nomapesValores = [];

for (var x = 0; x < nomapes.length; x++) {

  nomapesValores.push( nomapes[x].value );

var dnisValores = [];

for (var x = 0; x < dnis.length; x++) {

  dnisValores.push( dnis[x].value );

// Nuevo array bidimensional del conjunto de campos creados

        var aArray = [ nomapesValores, dnisValores ];

// Cuenta el numero de filas introducidas en la tabla

        var table = document.getElementById("tablainvitados");

        var rowCount = table.rows.length;

// Recorremos aArray y recuperamos los datos de la tabla

for (var i = 0; i < rowCount - 1; i++) {

    for (var j = 0; j < aArray.length; j++) {

      document.write("El valor de la posición [" + i + "][" + j + "] es [" + aArray[j][i] + "]<br/>");

  if (confirm('Los datos serán guardados en la Base de Datos. ¿Estás seguro de realizar esta acción?'))

     {document.Actualizar.submit() }

Valora esta respuesta

Comentar

pasar valor input como parametro en url de js para recogerla por get en php

manejar el width de un <p> x variable