Обработка запроса с Модалки
Вложений: 2
Добрый День! Суть вопроса!
Есть Модалка в ней я нажатием на кнопку создаю несколько <input> в таблице Одну таблицу я обрабатываю функцией addAll Как обработать 2,3,4 такие таблицы! -> CodePan <-
<body>
<th:block th:include="/admin/fragments/menu-body :: menu"></th:block>
<div class="container-fluid">
<button class="btn btn-success" data-toggle="modal" data-target="#addAll">Добавить</button>
</div>
</div>
<!-------------------------------------------------------------------------------------------------------Modal addAll-->
<div id="addAll" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="validityNameAll">Введите название:</label>
<input class="form-control" type="text" id="validityNameAll" required="required" name="name">
<button type="button" class="btn btn-success addScheduleDown" onclick="addScheduleDown()">Добавить график</button>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" onclick="addAll()">Сохранить</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>
</body>
</html>
//добавление новой таблицы в модалку
function addScheduleDown() {
$("button.addScheduleDown").after( "" +
"<table class=\"table\"> <thead>\n" +
"<tr>\n" +
"<th><label for=\"beginTimeAll\">Начало</label></th>\n" +
"<th><label for=\"mondayAll\">Пн</label></th>\n" +
"</tr>\n" +
"</thead>\n" +
"<tbody>\n" +
"<tr>\n" +
"<td><input type=\"time\" id=\"beginTimeAll\" name=\"beginTime\" required=\"required\"/></td>\n" +
"<td><input type=\"checkbox\" id=\"mondayAll\" name=\"monday\"/></td>\n" +
"</tr>\n" +
"</tbody>" +
"</table>");
}
//отправка значений на сервер в БД
function addAll() {
var nameValidity = $('#validityNameAll').val();
var beginTime = $('#beginTimeAll').val();
var monday = $("#mondayAll").prop('checked');
var validity = {
nameValidity:nameValidity,
validityScheduleList:[{
beginTime: beginTime,
monday: monday,
tuesday: tuesday,
}]
};
$.ajax({
type: "POST",
url: "/schedule/addAll",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(validity),
beforeSend: function (xhr) {
xhr.setRequestHeader(csrfHeader, csrfToken);
},
success: function (data) {
window.location.replace("/validity");
},
error: function (e) {
alert("error")
}
});
}
|
booratina,
А зачем вы каждый раз добавляете целую таблицу? Не достаточно было бы одной строки? И не должно быть одинаковых id. Можно и совсем без них. |
Цитата:
|
Как реализовать без id
|
<style>
.modal {
position:fixed;
top:0px;
display:none;
background-color: gray;
z-index:100;
}
</style>
<div class="container-fluid">
<button class="btn btn-success" data-toggle="modal" data-target="#addAll" onclick = "showModal()">Добавить</button>
</div>
<!-------------------------------------------------------------------------------------------------------Modal addAll-->
<div id="addAll" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" onclick = "hideModal()">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="validityNameAll">Введите название:</label>
<input class="form-control" type="text" id="validityNameAll" required="required" name="name">
<button type="button" class="btn btn-success addScheduleDown" onclick="addScheduleDown()">Добавить график</button>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" onclick="addAll()">Сохранить</button>
<button type="button" class="btn btn-danger" data-dismiss="modal" onclick = "hideModal()">Закрыть</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
function showModal() {
$("#addAll").show();
}
function hideModal() {
$("#addAll").hide();
}
//добавление новой таблицы в модалку
function addScheduleDown() {
if($(".table").length == 0) {
$("button.addScheduleDown").after( "" +
"<table class=\"table\"> <thead>\n" +
"<tr>\n" +
"<th>Начало</th>\n" +
"<th>Пн</th>\n" +
"</tr>\n" +
"</thead>\n" +
"<tbody>\n" +
"</tbody>" +
"</table>");
}
$(".table tbody").append(
"<tr>\n" +
"<td><input type=\"time\" name=\"beginTime\" required=\"required\"/></td>\n" +
"<td><input type=\"checkbox\" name=\"monday\"/></td>\n" +
"</tr>\n"
);
}
//отправка значений на сервер в БД
function addAll() {
var nameValidity = $('#validityNameAll').val();
var validity = {
nameValidity:nameValidity,
validityScheduleList:[] };
$(".table tbody tr").each(function() {
var beginTime = $(this).find("input[name='beginTime']").val();
var monday = $(this).find("input[name='monday']").prop('checked');
validity.validityScheduleList.push({
beginTime: beginTime,
monday: monday
});
});
alert( JSON.stringify(validity));
// $.ajax({
// type: "POST",
// url: "/schedule/addAll",
// contentType: "application/json; charset=utf-8",
// data: JSON.stringify(validity),
// beforeSend: function (xhr) {
// xhr.setRequestHeader(csrfHeader, csrfToken);
// },
// success: function (data) {
// window.location.replace("/validity");
// },
// error: function (e) {
// alert("error")
// }
// });
}
</script>
|
| Часовой пояс GMT +3, время: 03:52. |