Question

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

我正在使用nodejs，express和mongodb。

我有一个选择字段和两个textarea＆＃39; s。我可以在提交时发布textarea的第一个值。但是如果我想在提交时发布多个textarea值（多个textarea＆＃39; s会出现在点击相应的添加/加号按钮上），我无法发布。

此外，我在创建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

textarea出现在提交按钮下方。

要缓解此问题，请更改js

中的行

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

要

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

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

我可以在提交时发布textarea的第一个值。但如果我想要在提交时发布多个textarea值吗？

对于此查询，如果我说得对，您想要保存DB中的所有textarea值。在这里你有动态textareas。

最简单的方法是采取表格。在你的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)
 })**

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

2 个答案: