Форум

booratina · #1 (**permalink**) 18.05.2018, 11:37

Добрый День! Суть вопроса!
Есть Модалка в ней я нажатием на кнопку создаю несколько <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">&times;</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")
        }
    });
}

Dilettante_Pro · #2 (**permalink**) 18.05.2018, 12:31

booratina,
А зачем вы каждый раз добавляете целую таблицу? Не достаточно было бы одной строки?
И не должно быть одинаковых id. Можно и совсем без них.

booratina · #3 (**permalink**) 18.05.2018, 13:04

Сообщение от Dilettante_Pro

booratina,
А зачем вы каждый раз добавляете целую таблицу? Не достаточно было бы одной строки?
И не должно быть одинаковых id. Можно и совсем без них.

Так как же все таки можно это сделать ?

booratina · #4 (**permalink**) 20.05.2018, 14:07

Как реализовать без id

Dilettante_Pro · #5 (**permalink**) 21.05.2018, 14:13

<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()">&times;</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>

Форум

Справочник

Discord чат

Курсы javascript