Использование модального окна bootstrap для ввода данных

[Comer]

Вопрос новичка к знатокам .
Предыстория:
Делаю модуль, согласно шаблонов разработки модулей .
Есть таблица второго уровня , с параметрами , которые отображаются на закладке "Данные"
По задуманной логике модуля, у каждого из параметров есть дополнителные атрибуты , которые можно /нужно настраивать .
Было решено, что настройка этих параметров будет делаться через модальную форму .Выглядит это так

Снимок экрана 2020-09-18 210941.png (50.31 КБ) 1245 просмотров

Код из шаблона такой

Код: Выделить всё

 
 ...
 <!-- Кнопка, открывающее модальное окно -->
   <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal[#ID#]">
  <i class="glyphicon glyphicon-wrench"></i>
</button>
[#endif EXT#]
 </td> 
  </tr>
<!-- Модальное окно -->
<div class="modal" id="myModal[#ID#]" tabindex="-1" role="dialog" aria-labelledby="myModalLabel[#ID#]" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      
	  <div class="modal-header">
	        <h4 class="modal-title" id="myModalLabel[#ID#]">Настройки параметра: <b>[#TITLE#]</b </h4>
      </div>  
	  
      <div class="modal-body"> 	  
	   <div class="container-fluid">
          <!-- Контейнер, в котором можно создавать классы системы сеток -->
        <div class="row">
            <div class="col-md-6"> Округлять:</div>
            <div class="col-md-6"><input id="rprecision" name="rprecision" value="[#RPRECISION#]" type="number" step="1" min="0" class="form-control"></div>
          </div>
		 
		<div class="row">
            <div class="col-md-6"> Период сохранения:</div>
            <div class="col-md-6"><input id="updateperiod" name="updateperiod" value="[#UPDATEPERIOD#]" type="number" step="1" min="0" class="form-control"></div>
        </div>  
		  
		<div class="row">
            <div class="col-md-6"> Отклонение:</div>
            <div class="col-md-6"> <input id="deviation" name="deviation" value="[#DEVIATION#]" type="number"  class="form-control">  </div>
        </div>	
		  
		<div class="row">
            <div class="col-md-6"> Гистерезис:</div>
            <div class="col-md-6"> <input id="deviation" name="deviation" value="[#GISTERESIS#]" type="number"  class="form-control">  </div>
        </div>		  
		  
        </div>
	
	 <!-- 	<div class="form-group"> 
		
		<table>
		
	   </table>
	
		</div>  -->
      </div>
	
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Сохранить изменения</button>
      </div>
	  
    </div>
  </div>
</div>  

А теперь вопросы .
При таком коде, по кнопке Закрыть модальная форма закрывается ,
без сохранения информации.
А вот нажимая на кнопку Сохранить изменения.
ничего не происходит МОДАЛЬНАЯ ФОРМА НЕ ЗАКРЫВАЕТСЯ и информация в закладку Данные не передается .
Как лучше всего поступить.ЧТОБЫ ФОРМА ЗАКРЫЛАСЬ и данные сохранились для последующей передачи на сервер. Вероятно нужен какой то обработчик , как его сделать ?

[Comer]

Традиционно, для таких ситуаций, отвечаю сам на свои вопросы.

А теперь вопросы .
При таком коде, по кнопке Закрыть модальная форма закрывается ,
без сохранения информации.
А вот нажимая на кнопку Сохранить изменения.
ничего не происходит МОДАЛЬНАЯ ФОРМА НЕ ЗАКРЫВАЕТСЯ и информация в закладку Данные не передается .
Как лучше всего поступить.ЧТОБЫ ФОРМА ЗАКРЫЛАСЬ и данные сохранились для последующей передачи на сервер. Вероятно нужен какой то обработчик , как его сделать ?

Нудно добавить функцию на JS и это закрывает все вопросы . Вот пример

Код: Выделить всё

  
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
        <button id="save172" type="button" class="btn btn-primary"  onclick="modalclick172();">Сохранить изменения</button>
      </div>
	  
    </div>
  </div>
</div> 
<script type="text/javascript">

function modalclick172(){
$('#myModal172').modal('hide');	
	}

</script>