Как получить значения формы, включая <select>, и отправить ее в приложение node.js Express - PullRequest
0 голосов
/ 16 октября 2019

Я создаю веб-приложение и хочу отправить данные формы HTML в бэкэнд Express. У меня есть некоторые проблемы / вопросы.

  • Я использую функцию jQuery для POST-данных формы, возможно ли также использовать HTML вместо этого?
  • Я хотел бы отправить объект, который в точности похож наСхема и просто сохранить его. Это возможно?
  • Я хотел бы получить объект с заголовком, описанием, датой создания и массивом «значений», которые содержат имя и оценку. Оценка должна быть выбранным элементом HTML. Каков наилучший способ решить это? Должен ли я сначала собрать все в «сыром» формате, отсортировать все в бэкэнде? Или наоборот?

Буду признателен за вашу помощь.

Спасибо Андре

<form method="POST" action="/decisions">
    <h2>Enter a new decision</h2>
    <div class="form-group">

        <input class="form-control" id="name" tpye="text" name="name" placeholder="Enter Title">
    </div>
    <div class="form-group">
        <textarea class="form-control" id="description" name="description"></textarea>
    </div>
    <table class="table" id="valueTable">
        <h3>Values</h3>
        <thead>
            <th scope="col">Name</th>
            <th scope="col">Description</th>
            <th scope="col">Score</th>
            <th scope="col">Actions</th>
        </thead>
        <tbody>
            <% values.forEach(function(value){ %> %>
            <tr>
                <td><%= value.name %></td>
                <td><%= value.description %></td>
                <td><select>
                    <option value="-3">-3</option>
                    <option value="-2">-2</option>
                    <option value="-1">-1</option>
                    <option selected="selected" value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select></td>
                <td><button type="button" class="btn btn-danger btnDelete">Delete</button></td>
            </tr>
            <% }); %>



        </tbody>
    </table>
    <h5>Add value to Table</h5>
    <tr>
        <td><input id="inputName" type="text" placeholder="Name"></td>
        <td><input id="inputDescription" type="text" placeholder="Description"></td>
        <td></td>      
    </tr>
    <button type="button" id="btnAdd" class="btn btn-primary">Add</button>
    <hr>
    <button type="button" id="btnSend" clas="btn btn-primary" tpye="submit">Add decision</button>
</form>
$('#btnSend').on('click', function () {
    var title = $("#name").val();
    var description = $("#description").val();
    var rows = $("tbody tr", $("#valueTable")).map(function () {
        return [$("td", this).map(function () {
            return this.innerHTML;
        }).get()];
    }).get();

    var decisionObj = {
        title: title,
        description: description,
        values: rows
    }
    $.ajax({
        url: './',
        type: 'POST',
        data: decisionObj
    });
});
//CREATE
app.post("/decisions", function(req, res){
    var valArray = [];
    var values = req.body.values;
    values.forEach(function(value){
        valArray.push(
            {
                value_name: value[0],
                description: value[1]
            }
        )
    });
    var decision = {
        title: req.body.title,
        description: req.body.description,
        values : valArray
    }
    Decision.create(decision, function(err, decision){
        if (err){
            console.log(err);
        }
        else {
            console.log("decision added"+decision);
            res.redirect("../decisions/");
        }
    });
});
var DecisionSchema = new mongoose.Schema({
    title: String,
    description: String,
    created: { type: Date, default: Date.now },
    values: [
        {
            value_name: String, 
            score: Number,
            description: String
        }
    ]
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...