如何在单击“提交”按钮时获取多个文本区域框的值并将其存储在数据库中

Question

我想获取所有文本区域框的值，并在单击提交按钮时将其存储到数据库中。 单击添加按钮会出现多个文本区域。

我正在使用nodejs，express和mongodb。

我有一个选择字段和两个textarea。 我能够在提交时发布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);
    });
});

请参考这张图片

Answer 1

文本区域显示在“提交”按钮下方。

为了缓解这个问题，请在您的js行下方进行更改

$('.row').append(inputArea);

至

$('.buttonGroup').before(inputArea);

请澄清其他问题，以便我更新我的答案。

我能够在提交时发布textarea的第一个值。 但是，如果我想在提交时发布多个textarea值？

对于此查询，如果我找对了，您想将所有textarea的值保存在DB中。 这里有动态的文本区域。

最简单的方法是采取表格。 在您的AJAX中，您只需要序列化表格即可获得textareas的所有可能值。

$("#formId").searialize();

在提交按钮调用时使用此代码。 在服务器端，您将能够访问req.body所有数据

希望这对您很清楚。

Answer 2

我在HTML结构中添加了几类。

<link rel="stylesheet" href="/stylesheets/frameworks/materialize.min.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="/stylesheets/IoTSupport/updateNotification.css" />
<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 updateField">
            <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" id="add1">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" id="add2">add_circle</i>
        </div>
        <div class="col s6 right buttonGroup ">
            <a class="waves-effect waves-light btn submitButton">Submit</a>
        </div>
    </div>
</div>
<script type="text/javascript" src="/jquery/dist/jquery.js"></script>
<script src="/javascripts/IoTSupport/ajaxCalls/ajax.js" type="text/javascript"></script>
<script type="text/javascript" src="/javascripts/frameworks/materialize.min.js"></script>
<script src="/javascripts/IoTSupport/updateNotification.js" type="text/javascript"></script>

我的Javascript文件中几乎没有更改。 以下是获取所有textarea值的主要代码：

使用数组以完全迭代updateField = [];

**$("textarea[name='updateTextarea']").each(function () {
    var collectValue = ($(this).val())
    updateField.push(collectValue)
 })**