Question posted in
You can find the official documentation here.

How to get the value of a dynamic and multi-update id with jQuery and Ajax – Jquery ajax

I need help with several things:

First, I want to know how to get the id of an input, if it comes dynamically from the database. In the html it shows me for example for field 1 -> id = "parameter1", for field 2 -> id = "parameter2"

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

This is the jQuery code to fetch all the elements from the table and display them in the html. Second we have the update button, what you have to do is grab the data and update them all together, I know that I must do a forEach to do all the updates, but I don’t know how to do it or where to accommodate it.

$(document).ready(function () {
    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();

        $("#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();
                }
            });
            
        });
});
Tags:

2

Answers


  1. 0

    store data in JSON > when function fires > update values as per Key and values

    Login or Signup to reply.
  2. 0

    You can add class to each inputs then it would be easy to identify them . So , whenever your btnGuardar is clicked you can simply use .each to iterate through your inputs and then get values of input using $(this).find(".yourclassname").val() and pass this to your backend

    Demo Code :

    //suppose this is return from 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() {
  /* $.ajax({
     url: "http://localhost/slim/apiParametros.php/db_parametros",
     type: "get",
     success: function(response) {
       $(".primerSemestre").html('');
       $(".segundoSemestre").html('');*/
  $.each(response, function(i, index) {

    if (index.id <= 6) {
      //added class
      $(".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) {
      //added class
      $(".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 = []
  //loop through input-group
  $(".input-group").each(function() {
    //get all valeus and add them inside json-array
    datas.push({
      "id": $(this).find(".id").val(),
      "mes": $(this).find(".mes").text(),
      "valor": $(this).find(".valor").val(),
    })
  })
  console.log(datas)
  //use json stringfy and send..them..via ajx
  //or : 
  /*  $(".input-group").each(function() {
          $.ajax({
              url: "http://localhost/slim/apiParametros.php/db_parametros/" + $(this).find(".id").val(),
              type: "put",
              data: {
                id: $(this).find(".id").val(),
                mes: $(this).find(".mes").text(),
                valor: $(this).find(".valor").val()
                },
                success: function() {

                  getParametros();
                }
              });

  })*/


});
    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search