Send data via ajax request from dynamic input

Question

I have to send via ajax request all data from input that already exists and also the data from input that will be created dynamically, how can I do this? I need to store the data in an array of object but I don't know how to do this, where to place my array because I don't know if this is the better manner to solve this problem. Can anyone help me? Thank you

$().ready(function() {
  var arrayOfData = new Array();
  var obj1 = {
    id: "1",
    nominativo: "Carlo",
    cellulare: "345665738",
  };
  var obj2 = {
    id: "1",
    nominativo: "Andrea",
    cellulare: "345348934",
  };
  arrayOfData.push(obj1);
  arrayOfData.push(obj2);

  visualizzaModifica(arrayOfData, $("#divTeamLeaderProduzione"));

  function visualizzaModifica(array, div) {
    div.html("");

    let i = 1;

    array.forEach(function(e) {
      div.append(
        "<div id='div" +
          i +
          "' class='input-group'>" +
          "<input type='text' id='inputModificaNome" +
          i +
          "' class='form-control'  value='" +
          e.nominativo +
          "'>" +
          "<input type='text' id='inputModificaCellulare" +
          i +
          "' class='form-control' value='" +
          e.cellulare +
          "'>" +
          "</div>",
      );

      i++;
    });

    aggiungiInput(i, div);
  }

  function aggiungiInput(i, div) {
    if ($("#div" + i).length == 0) {
      var next = $("<div>", {
        id: "div" + i,
        class: "input-group",
      });

      var inputNome = $("<input>", {
        id: "inputModificaNome" + i,
        type: "text",
        class: "form-control",
      });

      var inputCellulare = $("<input>", {
        id: "inputModificaCellulare" + i,
        type: "text",
        class: "form-control",
      });

      next.on("change", function() {
        aggiungiInput(i + 1, div);
      });

      next.append(inputNome);
      next.append(inputCellulare);
      div.append(next);
    }

    $("#btnSalvaTeamLeaderProduzione").remove();
    $("#br").remove();
    div.append(
      "<br id='br'><input type='button' class='btn btn-dark' value='Salva' id='btnSalvaTeamLeaderProduzione'/>",
    );
  }

  $("#divTeamLeaderProduzione").on(
    "click",
    "#btnSalvaTeamLeaderProduzione",
    function() {
      $.ajax({
        url: "/updateTeamLeaderProduzione",
        type: "post",
        data: {
          /*HERE I NEED TO SEND ALL DATA FROM THE INPUTS ABOVE, ALSO THE DYNAMIC INPUT
        THAT WILL BE CREATED*/
        },

        success: function() {
          alert("Ok");
        },

        error: function(msg) {
          alert(JSON.stringify(msg));
        },
      });
    },
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divTeamLeaderProduzione">


</div>

Jai · Accepted Answer · 2018-08-03 06:41:33Z

2

I would suggest you to use a form and then you can use .serialize() method on it to get the serialized data to send.

Make sure to have a name attribute on the input fields.

You can wrap all the inner elements like:

  $("#divTeamLeaderProduzione").children().wrapAll('<form></form>')

  data: {
    formData: $("#divTeamLeaderProduzione form").serialize()
  },

Another option is to create your object to send:

var dataForAjax = {};

$("#divTeamLeaderProduzione")
              .find(':input')          // get all the input elements
              .not('[type="button"]')  // filter out the button element
              .each(function(){        // Iterate over each input found
    dataForAjax[this.id] = this.value;
});

Then:

  data: { formData : dataForAjax },

edited Aug 3, 2018 at 6:41

answered Aug 3, 2018 at 6:34

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ketan Vaghasiya · Accepted Answer · 2018-08-03 06:33:33Z

2

Wrap up all inputs inside a form tag and send data using form serialize() method.

$.ajax({
  url: "/updateTeamLeaderProduzione",
  type: "post",
  data:$("form").serialize(),

  success: function() {
    alert("Ok")
  },

  error: function(msg) {
    alert(JSON.stringify(msg));
  }

});
  });

edited Aug 3, 2018 at 6:33

answered Aug 3, 2018 at 6:28

Ketan Vaghasiya

3841 gold badge4 silver badges13 bronze badges

5 Comments

Bryan Del Bianco Over a year ago

How i retrieve data after send it?

Ketan Vaghasiya Over a year ago

@BryanDelBianco Check now i have updated your ajax call. This is how you can send all your form data at once.

Bryan Del Bianco Over a year ago

Look comment above, now i see! seems perfect but i don't know how to use data after, i'm using PHP

Ketan Vaghasiya Over a year ago

@BryanDelBianco the question you asked was how to send data which i knew and you agree that its what you wanted. i don't have any expertise on PHP but you can post a separate question for the same. Please mark this answer if you got your answer.

Bryan Del Bianco Over a year ago

sorry but the answer of Jai is more complete!

Collectives™ on Stack Overflow

Send data via ajax request from dynamic input

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related