модальный javascript сбросить закрыть содержание - PullRequest
Новая
       38

модальный javascript сбросить закрыть содержание

0 голосов
/ 25 февраля 2020

При сохранении изменения модальная форма должна автоматически закрыться, и при повторном запросе выбранный контент и текст должны быть сброшены. Любое предложение, что я делаю не так с jquery сценарием? 

$('#MyModal').on('hidden.modal', function () {
    $(this).find('form').trigger('reset');
    $('#myModal').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<button type="button" class="btn-primary" data-toggle="modal" data-target="#myModal" ">Modal Window</button>

<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title" id="myModalLabel">Modal title</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </div>
	  <div class="modal-body"> 
	     <div class="form-group col-md-12">
		<select id="role" name="role" class="form-control">
		<option value="" disabled selected>Select your option</option>
	<option value='Maybe'>Maybe</option>
		<option value='Yes'>Yes</option>
 		<option value='No'>No</option>
		</select>
	     </div>
             <div class="form-group col-md-12">
        <textarea id="thetext" name="thetext" class="form-control" rows="4" cols="20" maxlength="200"></textarea>
        <input type="hidden" name="selectedCase" id="selectedCase" value=""/>
           </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

1 Ответ

1 голос
/ 25 февраля 2020

Итак, я заметил несколько вещей, с которых нужно начать.

Во-первых, , у вас фактически нет формы, поэтому вы не можете вызвать reset для ее очистки.

Во-вторых , код $('#MyModal').on('hidden.modal' ищет событие с именем hidden.modal, которое на самом деле не вызывается, потому что модальный режим никогда не скрывается.

То, что должно произойти, это для добавления формы или для использования альтернативных методов очистки вместе с фактическим методом закрытия модального режима, который будет реализован. Я советую прослушивать нажатие кнопки, прежде чем вручную закрывать модальное окно и извлекать нужные значения, а затем очищать форму.

После исправления этих проблем вам следует набрать go, как показано ниже: 

$('#closeButton').on('click', function () {
    //Close Modal
    $(".modal").modal("hide");
    //Get Values
    var val1 = $("#role").val();
    var val2 = $("#thetext").val();
    //Reset Values
    document.getElementById("form").reset();

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<button type="button" class="btn-primary" data-toggle="modal" data-target="#myModal" ">Modal Window</button>

<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title" id="myModalLabel">Modal title</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </div>
	  <div class="modal-body"> 
    <form id ="form">
	     <div class="form-group col-md-12">
		<select id="role" name="role" class="form-control">
		<option value="" disabled selected>Select your option</option>
	<option value='Maybe'>Maybe</option>
		<option value='Yes'>Yes</option>
 		<option value='No'>No</option>
		</select>
	     </div>
             <div class="form-group col-md-12">
        <textarea id="thetext" name="thetext" class="form-control" rows="4" cols="20" maxlength="200"></textarea>
        <input type="hidden" name="selectedCase" id="selectedCase" value=""/>
           </div>
      </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="closeButton">Save changes</button>
      </div>
    </div>
  </div>
</div>

Надеюсь, это то, что вы хотели!

Феликс.

...