Problems in capturing input when opening modal

Question

Problems in capturing input when opening modal

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

I'm trying to capture the value of an input from a modal once it's opened. I did this, but it did not work:

 $('#modal').on('show.bs.modal', function (e) {
 var var_tipo = $("#campo_tipo").val();

 //testando variavel
 alert(var_tipo);
 });

I used an alert to check if the variable is loading. In this case, it loads the previous modal value. What am I doing wrong?

jquery modal

asked by anonymous 14.02.2017 / 19:40

2 answers

How to remove unwanted words from a text? Stackoverflow in quick sort

score 2 · Answer 1

You used the wrong event.

According to the Bootstrap documentation for modal , the correct event for when the modal is fully open is the shown.bs.modal .

The show.bs.modal event is triggered when the modal is called, so the variable was with the previous modal data.

Already with the shown.bs.modal event, it is fired when the modal is fully open / visible. With this, the variable takes the current value.

Your code looks like this:

 $('#modal').on('shown.bs.modal', function (e) {
 var var_tipo = $("#campo_tipo").val();

 //testando variavel
 alert(var_tipo);
 });

score 1 · Answer 2

Attention to the correct way to call the event. If the case is firing by showing a new modal , the right one is shown.bs.modal :

$(function() {
  $('#myModal').on('shown.bs.modal', function (e) {
   var var_tipo = $("#campo_tipo").val();
   alert(var_tipo);
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<input type="hidden" id="campo_tipo" value="tipo">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        Demo
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

show.bs.modal uses the active instance, whereas shown.bs.modal will trigger the event only after loading the new modal , and this prevents the previous instance from interfering.

Source: Events .