Я создаю веб-приложение и хочу отправить данные формы 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
}
]
});