如何使用表单一次提交多个数据

The question is worded awkwardly, so bear with me as I explain.

这个问题措辞笨拙,所以请耐心等待我解释。

I am using Node.js, Express, and MongoDB.

我正在使用Node.js,Express和MongoDB。

Here is my backend code for a form submission:

这是表单提交的后端代码:

router.post('/inputlog', function(req, res) {
Log.findOne({logTitle: req.body.logTitle}, function(err, existingLog) {
    if(!existingLog) {
        req.flash('errors', req.body.logTitle + ' was not found');
        return res.redirect('/inputlog');
    }
    if(existingLog) {
        Lot.findOneAndUpdate({logTitle: req.body.logTitle}, {
            $push: {
                OutdoorLogs: {
                    LogInput: {
                        logDate: req.body.logDate,
                        logInput: req.body.logInput
                    }
                }
            }
        }, {safe: true, upsert: false}, function (err, logSuccess) {
            if(err) {
                req.flash('errors', 'Log was not inserted due to Error.');
                return res.redirect('/inputlog');
            }
            if(logSuccess) {
                req.flash('success', req.body.logTitle+ ' Log has been updated. ');
                return res.redirect('/inputLog');
            }
        });
    }
})
});

So what is all this saying? Basically, I have a form to input logs. You first add a title for a log. It will then search the database (MongoDB) for the title of the log you inputted. If no such log title exists, it will send the user an error.

那么这句话到底是什么?基本上,我有一个输入日志的表单。首先为日志添加标题。然后,它将在数据库(MongoDB)中搜索您输入的日志的标题。如果不存在此类日志标题,则会向用户发送错误。

If the log title does exist, it will add a 'logDate' and 'logInput' into an array in that log title.

如果日志标题确实存在,它会将“logDate”和“logInput”添加到该日志标题中的数组中。

That's all well and good. BUT! What if I wanted to input multiple logs (multiple logDate's and logInput's) at the same time? The way I have the form set up, I can only input a new log into this array one at a time, and here is my form for reference:

这一切都很好。但!如果我想同时输入多个日志(多个logDate和logInput),该怎么办?我设置表单的方式,我只能一次一个地输入一个新的日志,这里是我的表格供参考:

<form method="POST" action="/inputlog">
    <div class='form-group'>
        <label for="logTitle">Log Title</label>
        <input type="text" name="logTitle" autofocus class="form-control uppercase" id="logTitle"/>
    </div>
    <div class='form-group'>
        <label for="logDate">Log Date</label>
        <input type="text" name="logDate" class="form-control logDate" id="logDate"/>
    </div>
    <div class='form-group'>
        <label for="logInput">log Input</label>
        <input type="text" name="logInput" class="form-control logInput" id="logInput"/>
     </div>
     <div class='form-group'>
         <input type="submit" class="btn btn-default btn-primary pull-right" value="submit">
   </form>

So, again, the way this form is set up, I can only input one log at a time. If I want to input 20 different logs at once, I would have to do it all one at a time (input the log, hit submit, input the log, hit submit, etc...).

所以,再次,这个表单的设置方式,我一次只能输入一个日志。如果我想一次输入20个不同的日志,我将不得不一次一个地输入(输入日志,点击提交,输入日志,点击提交等等)。

How can I input multiple logs (entries) with only one submit?

如何只用一次提交输入多个日志(条目)?

1 个解决方案

#1

Why don't you refactor the form, so that once one entry is complete, an additional set of inputs appears. I'd use onblur on every input that would check the form to make sure each input has some text, if it does run a function to add an additional form. Have an id for each form group that could correspond to an array index, and push an object with the fields in. This way, if it's edited later, they can be modified before submit.

为什么不重构表单,以便一旦完成一个条目,就会出现一组额外的输入。我会在每个输入上使用onblur来检查表单以确保每个输入都有一些文本,如果它确实运行了一个函数来添加一个额外的表单。为每个可以对应数组索引的表单组创建一个id,并使用字段推送一个对象。这样,如果稍后编辑它们,可以在提交之前修改它们。