Read data from Javascript dynamic input in node.js

Question

I need dynamic input fields for my node-js application. I need to populate a input text are for writing their cost names on a form. I found some javascript code on internet. It works perfectly but when i try to read data from body, i only have one value. What could be the reason?

Here is my javascript code;

$(function () {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID

  var x = 1; //initlal text box count
  $(add_button).click(function (e) {
    //on add input button click
    e.preventDefault();
    if (x < max_fields) {
      //max input box allowed
      x++; //text box increment
      $(wrapper).append(
        '<div><input type="text" name="generalCostName[]" class="form-control"/><a href="#" class="remove_field">Remove</a></div>'
      ); //add input box
    }
  });

  $(wrapper).on("click", ".remove_field", function (e) {
    //user click on remove text
    e.preventDefault();
    $(this).parent("div").remove();
    x--;
  });
});

here is the part of my ejs file;

<div class="input_fields_wrap">
   <button class="add_field_button">Add More Fields</button><div>
   <input type="text" name="generalCostName[]" class="form-control"></div>
</div>

For example, i populate 2 more input fields and their values are "Test1","Test2" and "Test3". When i submit values to the node-js side, on the console( console.log(req.body.generalCostName) ) i only have Test1 value. What could be the reason?

Answer 1

You need to use formData to send your dynamically added element to your backend node.js . We need to use jQuery $.each function to get all the values of the input you will added.

Once we have all the value we can append them to the formData which will send via ajax or axios to the backend .

I have limited the max fields added to 3 so for demo purposes but you can use as many as you like. As soon as you hit submit - the data will be stored in the formData and then you can do POST request to node.js where you can see all this coming.

Demo: (Shows all the inputs added and their value stored in the formData)

 $(function() { var max_fields = 3; //maximum input boxes allowed var wrapper = $(".input_fields_wrap"); //Fields wrapper var add_button = $(".add_field_button"); //Add button ID var x = 1; //initlal text box count $(add_button).click(function(e) { //on add input button click e.preventDefault(); if (x < max_fields) { //max input box allowed x++; //text box increment $(wrapper).append( '<div><input type="text" name="generalCostName" class="form-control"/><a href="#" class="remove_field">Remove</a></div>' ); //add input box } }); $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text e.preventDefault(); $(this).parent("div").remove(); x--; }); }); //Send data to node.js function sendData() { //initialize formData var formData = new FormData(); //Get all value of dynamically added elements $('.form-control').each(function(index, item) { var val = $(item).val(); //Append Data formData.append('value[]', val) }); // Display the key/value pairs for formData for (var pair of formData.entries()) { console.log(pair[0] + ', ' + pair[1]); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="input_fields_wrap"> <button class="add_field_button">Add More Fields</button> <div> <input type="text" name="generalCostName[]" class="form-control"></div> </div> <br> <button onclick="sendData()"> Submit </button>