【发布时间】：2025-12-11 02:55:01
【问题描述】：
我想在单击提交按钮时获取所有文本区域框的值并存储到数据库中。 单击添加按钮时会出现多个文本区域。
我正在使用 nodejs、express 和 mongodb。
我有一个选择字段和两个文本区域。我可以在提交时发布 textarea 的第一个值。 但是，如果我想在提交时发布多个 textarea 值（单击相应的添加/加号按钮会出现多个 textarea），我无法发布它。
另外，我在创建相同的 textarea 框模板但带有删除按钮时遇到了问题。文本区域出现在提交按钮下方。 谁能帮帮我？
这是我的html代码：
<div class="container">
<div class="row">
<h5> New updates/Notifications </h5>
<div class="input-field col s11">
<select class="moduleSelect" id="getOptionValue">
<option value="" disabled selected>Choose Module</option>
</select>
</div>
<div class="input-field col s11">
<textarea id="textarea updateTextarea" name="updateTextarea" class="materialize-textarea"></textarea>
<label for="textarea">Update area</label>
</div>
<div class="col s1 addButtonUpdate">
<i class="material-icons small icon-demo">add_circle</i>
</div>
<div class="input-field col s11 notificationField">
<textarea id="textarea notificationTextarea" name="notificationTextarea" class="materialize-textarea"></textarea>
<label for="textarea">Notification area</label>
</div>
<div class="col s1 addButtonNotify">
<i class="material-icons small icon-demo">add_circle</i>
</div>
<div class="col s6 right buttonGroup ">
<a class="waves-effect waves-light btn submitButton">Submit</a>
</div>
</div>
</div>
这是我的 Javascript 代码：
$(document).ready(function() {
var getOptions = ajaxServices("/iotsupport/modules/getModules", "GET");
if (getOptions.status == 201) {
for (var i in getOptions.body) {
var option = getOptions.body[i].moduleName;
var optionDiv = document.createElement('option');
optionDiv = $(optionDiv).text(option);
$('.moduleSelect').append(optionDiv);
}
} else if (getOptions.status == 401) {
swal({
title: "",
text: "Error fetching the query options",
icon: "error",
button: "OK"
})
}
$('select').material_select();
$(".submitButton").on('click', function(e) {
var optionList = $("select[id='getOptionValue']").val();
console.log(optionList);
var updateFieldValue = $("textarea[name='updateTextarea']").val();
var notificationField = $("textarea[name='notificationTextarea']").val();
var sendObject = {
"moduleName": optionList,
"updateObject": updateFieldValue,
"notifyObject": notificationField
}
var responseObject = ajaxServices("/iotsupport/addUpdateNotify/postUpdateNotify", "POST", sendObject);
console.log(responseObject);
if (responseObject.status == 401) {
alert("some error occured")
} else if (responseObject.status == 201) {
alert("update/notification is done.");
location.reload();
}
});
$(".addButtonUpdate").on('click', function(e) {
var n = 8 // adjust it in some way
var inputArea = ['<div class=" col s11 materialize-textarea input-field col s' + n + '">',
'<textarea class="input-field materialize-textarea" rows="3" id="cloneTextarea" name="cloneTextarea textArea-' + n + '">',
'update area',
'</textarea></div>'
].join('')
$('.row').append(inputArea);
console.log(inputArea);
});
$(".addButtonNotify").on('click', function(e) {
var n = 8 // adjust it in some way
var inputArea = ['<div class="col s11 materialize-textarea input-field col s' + n + '">',
'<textarea class="input-field materialize-textarea" rows="3" id="textArea-' + n + '">',
'Notify area',
'</textarea></div>'
].join('')
$('.row').append(inputArea);
console.log(inputArea);
});
});
请参考这张图片
【问题讨论】：
-
在下面查看我的答案。
标签： jquery html node.js express materialize