0

Esta es mi función para agregar un input en la tabla, los valores que ingrese el usuario quiero recibirlos en modo de arreglo para hacer los insert en mysql

function agregarFila() {
  // añade clases y no IDs duplicados
  document.getElementById("tablainvitados").insertRow(-1).innerHTML =
    '<td><div class="input-group">'
    +'<input type="text" class="partNo" id="partNo" name="partNo" placeholder="COD/Part No" style=" min-width:130px; max-width:40%;min-height:30px;height:100%;width:70%;" []>'
    +'</div></td>'
    + '<td>'
    +  '<div class="input-group">'
    + '<input type="text" class="product_name" id="product_name" name="product_name" placeholder="Nombre/T&iacute;tulo" autofocus[]>'
    +  '</div>'
    +  '<div id="lst_product_name" style="cursor: pointer;" class="list-group"></div>'
    +  '</td>'
    +  '<td>'
    +   '<div class="input-group">'
    +   '<input type="text" class="measure" id="measure" name="measure" placeholder="A/E" style=" min-width:70px; max-width:40%;min-height:30px;height:70%;width:70%;" []>'
    +  '</div>'
    +   '</td>'
    +   '<td>'
    +  '<div class="input-group">' 
    +  '<input type="text" class="desc" id="desc" name="desc" placeholder="Descripcion"[]>'
    +   '</div> '
    +   '</td>'
    + '<td>'
    +   '<div class="input-group">' 
    +    '<input type="text" class="date" name="date" id="date" data-date data-date-format="yyyy-mm-dd" placeholder="yyyy-mm-dd" style=" min-width:85px; max-width:40%;min-height:30px;height:70%;width:70%;" []>'
    +    '</div>'
    +    '</td>'
    +    '<td>'
    +    '<div class="input-group">'
    +    '<textarea  class="justify" id="justify" name="justify" placeholder="Justificaci&oacute;n" style=" min-width:200px; max-width:40%;min-height:70px;height:100%;width:40%;" style=" min-width:200px; max-width:40%;min-height:70px;height:100%;width:70%;" ></textarea>' 
    +    '</div>'
    +    '</td>'
    +    ' <td>'
    +    ' <div class="input-group">'
    +    '<input type="text" class="quantity" id="quantity" name="quantity" placeholder="0" style=" min-width:60px; max-width:40%;min-height:30px;height:100%;width:70%;" []>'
    +    '  </div> '
    +    '  </td>'


    ;

}

Sí logro enviar los datos por AJAX pero no en forma de arreglo, supongo que la forma que se están enviando no es la indicada, porque al intentar enviarlo de forma de arreglo me genera errores.

Esta función la tengo en un archivo js que incluyo como referencia para poder llamar la función una vez que el usuario ingrese sus datos en los inputs y, como es un arreglo de inputs, podrían ser "1 a n" renglones.

function btn_guardar_dato()
{
    

// Aquí intenté hacer un arreglo donde me guardara todos mis inputs,
// pero creo que esta mal por que me genera error al intentar recibirlo.

    valores=new Array();
    $('#tablainvitados').each(function (){
    var partNo= $("#partNo").val();
    var product_name = $("#product_name").val();
    var measure = $("#measure").val();
    var desc =    $("#desc").val();
    var date = $("#date").val();
    var justify = $("#justify").val();
    var quantity = $("#quantity").val();
    });
   

Si solo envio la variable "ob" y lo recibo en PHP sí puedo mostrar el resultado pero en arreglo no lo he logrado.

     var ob = {partNo:partNo, product_name:product_name, measure:measure, desc:desc, date:date, justify:justify, quantity:quantity};

     $.ajax({
                type: "POST",
                url:"newtestable.php",
                data: ob,
                data:{valores:valores},
                beforeSend: function(objeto){
                
                },
                success: function(data)
                { 
                 
                 $("#tablainvitados").html(data);

                 setTimeout(function(){
                  $("#tablainvitados").html("");
                 },2000);
                

                }
             });
}

Aquí está un pequeño código donde intentaba recibirlo

archivo newtestable

Actualizacion

En esta funcion puedo recuperar todos los renglones que ingrese, y puedo recorrer el arreglo sin embargo yo quisiera ingresar esos datos a una tabla en mysql por eso intentaba pasarlo por medio de ajax.

  const partNo = document.querySelectorAll(".partNo");
  const product_name = document.querySelectorAll(".product_name");
  const measure = document.querySelectorAll(".measure");
  const desc = document.querySelectorAll(".desc");
  const date = document.querySelectorAll(".date");
  const justify = document.querySelectorAll(".justify");
  const quantity = document.querySelectorAll(".quantity");
  // los convertimos a un array bidimensional
  // el primer elemento sera un array con los nombres
  // el segundo elemento sera un array con los dnis
  aArray = [
    [...partNo].map(el => el.value),
    [...product_name].map(el => el.value),
    [...measure].map(el => el.value),
    [...desc].map(el => el.value),
    [...date].map(el => el.value),
    [...justify].map(el => el.value),
    [...quantity].map(el => el.value)
  ];
  
  var table = document.getElementById("tablainvitados");
  var rowCount = table.rows.length;
  var arraylen =aArray.length;

  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/>");
    }
  }

No se si lo que estoy haciendo sea in correcto o exista otra forma de hacerlo mas facil, recalcando que el usuario tiene que poder agregar tantas filas como desee.

introducir la descripción de la imagen aquí

4
  • Lo primero es que deberías hacer caso al comentario de la función: // añade clases y no IDs duplicados. Estás insertando varios campos y repitiendo IDs, que deben ser únicos
    – Triby
    el 2 mar. 2021 a las 18:28
  • Hola. Desvirtuaste la pregunta inicial. Déjala como estaba, para que pueda ser útil a otros. Trata de aprovechar la respuesta que tuvo y luego preparas una nueva pregunta basada en lo que no pudiste resolver. De esa forma, podrás recibir respuestas sensatas y éstas, podrán ser aprovechadas por otras personas. Si cambias una pregunta, que ha recibido respuesta, la respuesta deja de ser pertinente y no tiene sentido que siga ahí. Eso riñe con la naturaleza del sitio.
    – quevedo
    el 2 mar. 2021 a las 20:50
  • Adicional. Al cambiar los ids por clases, los selectores devuelven arrays y, los valores deben ser recogidos usando .each(), complicas el asunto innecesariamente y te alejas de una posible solución
    – quevedo
    el 2 mar. 2021 a las 20:53
  • Muy bien, una disulpa no habia notado que al modificar el codigo deja fuera de contexto mi pregunta incial. Gracias por el consejo saludos. el 2 mar. 2021 a las 21:09

1 respuesta 1

1

Tu problema, además de que no usas correctamente los IDS que deben ser únicos, como te comenta @Triby , radica en que estás mezclando conceptos. Cuando se usa el método post para enviar una solicitud ajax, el navegador prepara una cadena de texto plano con los elementos a enviar, que tiene un formato como el siguiente:

<!-- language: lang-js -->
    let data = 'clave1=valor1&clave2=valor2...etc';

Cuando esa cadena es recibida en el servidor y entregada a reside en forma de array en la variable superglobal $_POST así:

<?php
    $_POST = [ 'clave1' => 'valor1', 'clave2' => 'valor2', ... etc];

Y, dichos valores pueden ser recuperados, en el servidor, para ser usados así:

<?php
   $variable1 = isset($_POST['clave1']) ? $_POST['clave1'] : DEFAULT_1;
   $variable2 = isset($_POST['clave2']) ? $_POST['clave2'] : DEFAULT_2;
   // ... etc
   // Donde DEFAULT_i es el valor por defecto necesario para la variable iesima
   // en caso de que no haya sido enviada.

Observa que no se ha hablado de que en la práctica no es más que texto plano que puede ser convertido a objetos por un intérprete. Y cuyo uso se justifica cuando se va a tratar con estructuras complejas. Cosa que no ocurre en este caso. De modo, que voy a ilustrar una solución simple, con un juego de índices que no debiera repetirse (debes modificarlos):

  1. Se prepara una función que lee y codifica los valores que van a ser enviados al servidor.
  2. Se aplica la función mediante llamados sucesivos a formatear los valores a enviar.
  3. Se ejecuta el llamado ajax:
<!-- language: lang-js -->
/**
 * 1. Este método asegura que los valores sean codificados adecuadamente para
 * ser enviados sin fallos al servidor.
 */
function prepararValoraEnviar(selector, clave){
    let valor = $(selector).val(); // lee el valor usando el selector pasado
    return clave + '=' + encodeURIComponent( valor ); // lo formatea y devuelve
}

// 2. Recogemos los valores que necesitas enviar:
let valores = prepararValoraEnviar("#partNo", "partNo") + '&' +
              prepararValoraEnviar("#product_name", "product_name") + '&' +
              prepararValoraEnviar("#measure", "measure") + '&' +
              prepararValoraEnviar("#desc", "desc") + '&' +
              prepararValoraEnviar("#date", "date") + '&' +
              prepararValoraEnviar("#justify", "justify") + '&' +
              prepararValoraEnviar("#quantity", "quantity");

// 3. Ahora los valores a enviar son una cadena de texto correctamente formateada 
// para ser enviada vía post o vía get (no recomendado, para mi gusto)
// procedemos a hacer el llamado ajax usando jQuery:
let urlphp = "newtestable.php";
var jqxhr = $.ajax({ url: urlphp, type: 'POST', 'data': valores } )
    .done(function(slztxt) { 
        // hacer algo con la respuesta. Viene como texto plano
        // en la variable slztxt
        // podría ser JSON si lo codificó en el servidor
    }).fail(function() {
        // actuar en caso de error
    });

Si no desea usar JQuery para hacer uso de ajax puede leer esta respuesta para R - Usar Ajax con JavaSript vanilla

Decidí aprovechar esta pregunta para mostrar que el uso de es más simple de lo que se piensa. Y, de paso ilustrar que maneja textos planos que eventualmente pueden corresponder a objetos JSON.

6
  • Primero que nada muchas gracias por responder tan rapido.... Sobre los id's repetidos la solucion seria quitarle el id y dejar los inputs con puras clases a lo que entendi. el 2 mar. 2021 a las 20:00
  • Ahora bien sigo teniendo una duda respecto a la funcion que estoy realizando para crear varios renglones con inputs en mi tabla, no se me ocurre como recuperar esos valores ya que no es una tamaño fijo. el 2 mar. 2021 a las 20:02
  • Puedes usar ids con sufijos diferenciadores ejemplo: product_name_1, product_name_2, etc donde los sufijos corresponden a las líneas y al iterar puedes usar un contador que se incrementa para cada línea y se puede usar para construir los selectores
    – quevedo
    el 2 mar. 2021 a las 20:03
  • Entonces seria implementar una funcion donde cada que el usuario presione el boton agregar fila itere los inputs y les agregue uno distinto al anterior ? el 2 mar. 2021 a las 20:10
  • Esa podría ser una solución. Pero, debes resolver la sincronización y el almacenamiento de los datos, porque ej: dos usuarion ven n registros; y si ambos tratan de agregar, alguno agrega n+1 y el otro n+2 sin saberlo, pero para ambos parecerá estar agregando n+1... y luego ambos deben ver todo. Hay detalles complejos a resolver
    – quevedo
    el 2 mar. 2021 a las 20:14

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.