从 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
,后者将通过 ajax
或 axios
发送到 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>
我的 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
,后者将通过 ajax
或 axios
发送到 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>