0

Necesito ayuda con varias cositas:

Primero, quiero saber como obtener el id de un input, si este viene de forma dinamica desde la base de datos. En el html me muestra por ejemplo para el campo 1 -> id="parametro1", para el campo 2 -> id="parametro2"

<input id='parametro"+ index.id +"' value='" + index.id + "'></input>

Este es el codigo jQuery para traer todos los elementos de la tabla y mostrarlos en el html. Segundo tenemos el boton actualizar, que lo que tiene que hacer, es agarrar los datos y actualizarlos todos juntos, se que debo hacer un forEach para hacer todos los update, pero no se como hacerlo o donde acomodarlo.

$(document).ready(function () {
    //Muestra todos los meses METODO GET
    function getParametros() {
        $.ajax({
            url: "http://localhost/slim/apiParametros.php/db_parametros",
            type: "get",
            success: function (response) {
                $(".primerSemestre").html('');
                $(".segundoSemestre").html('');
                $.each(JSON.parse(response), function (i, index) {
                        
                    if (index.id <= 6) {
                        $(".primerSemestre").append("<div class='input-group'>" +
                        "<input id='parametro"+ index.id +"' value='" + index.id + "' hidden></input>"+
                        "<div id='parametro"+ index.mes +"' class='input-group-prepend' style='flex:0 0 20%'><span class='input-group-text w-100'>" + index.mes + "</span></div>" +
                        "<input type='number' id='parametro"+ index.valor +"' class='form-control' value='" + index.valor + "'>" +
                        "</div><br>");
                    }
                    if (index.id > 6) {
                        $(".segundoSemestre").append("<div class='input-group'>" +
                        "<input id='parametro"+ index.id +"' value='" + index.id + "' hidden></input>"+
                        "<div id='parametro"+ index.mes +"' class='input-group-append' style='flex:0 0 20%'><span class='input-group-text w-100'>" + index.mes + "</span></div>" +
                        "<input type='number' id='parametro"+ index.valor +"' class='form-control' value='" + index.valor + "'>" +
                        "</div><br>");
                    }
                });
            }
        });
    }
    getParametros();

    //Boton actualizar
        $("#btnGuardar").click(function () {
            var id = $('#parametro'+'2').val();
            console.log(id)
            var mes = $('#parametro'+'Febrero').text();
            console.log(mes)
            var valor = $('#parametro'+'20').val();
            console.log(valor)
            
            $.ajax({
                url: "http://localhost/slim/apiParametros.php/db_parametros/" + id,
                type: "put",
                data: { id: id, mes: mes, valor: valor },
                success: function () {

                    getParametros();
                }
            });
            
        });
});


-- Esta es la vista, traigo mediante el get armada las dos partes y el boton guardar lo que hace es enviar los datos a la bd y actualizarlos con put

6
  • Si este es solo un elemto y tiene un nodo padre podrías acceder al nodo padre y luego acceder a su primer y único nodo hijo
    – Christian
    Commented el 3 may. 2021 a las 22:43
  • ¿Su objetivo es generar <input> elementos basados ​​en los valores de la base de datos y luego enviar un formulario para actualizar esos valores en la base de datos?
    – John Doe
    Commented el 3 may. 2021 a las 22:58
  • John Doe - Yo traigo los valores desde la base de datos y armo dos columnas. Luego necesito que si cambio un dato o varios, este dato se guarde en la base de datos, pero necesito hacerlo de forma multiple. El unico dato que necesito cambiar es el de valor, el resto siempre queda igual.
    – Caro S.
    Commented el 3 may. 2021 a las 23:24
  • @CaroS. ¿Que hace btnGuardar en su código? Además, ¿de dónde sacas estos valores del campo 1 -> id ..? -
    – John Doe
    Commented el 4 may. 2021 a las 5:22
  • @JohnDoe - El btnGuardar es un boton que lo unico que debe hacer es enviar los datos cambiados a la base de datos y actualizarlos, los valores del (campo 1 -> id ..) es un ejemplo, cuando traigo cada registro, este viene con su correspondiente id, el cual viene de forma dinamica, por que es una concatenacion de un string+variable (id='parametro"+ index.id +"') y lo que quiero saber es como acceder a esa variable desde btnGuardar que viene de forma dinamica
    – Caro S.
    Commented el 4 may. 2021 a las 10:43

1 respuesta 1

0

Revisando tu pregunta llegue a una posible solución con un ejemplo mínimo y es que puedes agregar class a cada entrada, entonces sería fácil identificarlas. Por lo tanto, cada vez que btnGuardar haga click, simplemente puede usar .each para iterar a través de sus entradas y luego obtener valores de entrada $(this).find(".yourclassname").val() y pasar esto a tu backend.

Ejemplo

//supongamos que esto es retorno de ajax ..
var response = [{
  "id": 1,
  "mes": "acb",
  "valor": 1
}, {
  "id": 2,
  "mes": "acb2",
  "valor": 2
}, {
  "id": 8,
  "mes": "acb8",
  "valor": 8
}, {
  "id": 9,
  "mes": "acb9",
  "valor": 9
}]

function getParametros() {
  $.each(response, function(i, index) {

    if (index.id <= 6) {
      //clase agregada
      $(".primerSemestre").append("<div class='input-group'>" +
        "<input id='parametro" + index.id + "' class='id' value='" + index.id + "' hidden></input>" +
        "<div id='parametro" + index.mes + "' class='input-group-prepend mes' style='flex:0 0 20%'><span class='input-group-text w-100'>" + index.mes + "</span></div>" +
        "<input type='number' id='parametro" + index.valor + "' class='form-control valor' value='" + index.valor + "'>" +
        "</div><br>");
    }
    if (index.id > 6) {
      //clase agregada
      $(".segundoSemestre").append("<div class='input-group'>" +
        "<input id='parametro" + index.id + "' class='id' value='" + index.id + "' hidden></input>" +
        "<div id='parametro" + index.mes + "' class='input-group-append' style='flex:0 0 20%'><span class='input-group-text w-100 mes'>" + index.mes + "</span></div>" +
        "<input type='number' id='parametro" + index.valor + "' class='form-control valor' value='" + index.valor + "'>" +
        "</div><br>");
    }
  });
}
getParametros();

$("#btnGuardar").click(function() {
  var datas = []
  //bucle a través del grupo de entrada
  $(".input-group").each(function() {
    //obtener todos los valores y agregarlos dentro de json-array
    datas.push({
      "id": $(this).find(".id").val(),
      "mes": $(this).find(".mes").text(),
      "valor": $(this).find(".valor").val(),
    })
  })
  console.log(datas)
});
.primerSemestre,
.segundoSemestre {
  border: 2px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="primerSemestre">
</div>
<div class="segundoSemestre">
</div>
<button id="btnGuardar">Save</button>

Espero que sea de ayuda.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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