从 node.js 中的 Javascript 动态输入读取数据

Read data from Javascript dynamic input in node.js

我的 node-js 应用程序需要动态输入字段。我需要填充一个输入文本,用于在表单上写下他们的费用名称。我在互联网上找到了一些 javascript 代码。它工作得很好,但是当我尝试从 body 读取数据时,我只有一个值。可能是什么原因?

这是我的 javascript 代码;

$(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--;
  });
});

这是我的 ejs 文件的一部分;

<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>

例如,我填充了另外 2 个输入字段,它们的值为“Test1”、“Test2”和“Test3”。当我向 node-js 端提交值时,在控制台上( console.log(req.body.generalCostName) )我只有 Test1 值。可能是什么原因?

您需要使用 formData 将动态添加的元素发送到后端 node.js。我们需要使用 jQuery $.each 函数来获取您要添加的输入的所有值。

一旦我们拥有所有值,我们就可以将它们附加到 formData,后者将通过 ajaxaxios 发送到 backend

出于演示目的,我已将添加的最大字段限制为 3 个,但您可以根据需要使用任意数量的字段。一旦您点击 submit - 数据将存储在 formData 中,然后您可以向 node.js 发送 POST 请求,在那里您可以看到这一切。

演示:(显示所有添加的输入及其存储在 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>