Problems capturing input when opening modal

Asked

Viewed 691 times

2

I am trying to capture the value of a modal input as soon as it is opened. I did it as follows, 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 being loaded. In this case, it loads the value of the previous modal. What I am doing wrong?

jquery modal

  • How many #campo_tipo you have in your HTML?

  • I was reading about the Bootstrap modal. Already tried to change the "show.bs.modal" to "Shown.bs.modal" ?

  • There’s only one #campo_type

  • 1

    Really, Ricardo! It worked out the way you suggested.

  • @Luis marks the answer to close the post as solved.

2 answers

2

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 event show.bs.modal is triggered when the modal is called, so the variable was with the data of the previous modal.

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

Your code would look like this:

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

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

  • You could avoid an unnecessary response by using the comments, it would be more useful to the community.

  • But this answer is the correct one. I commented there above and he thanked. I just answered him to mark as solved and not leave the question open.

  • So, but the answer is not so objective, you simply say to exchange a term, could give more details, or a brief quote instead of just adding a link to the bootstrap documentation, something that would clear up any doubts arising from your reply

  • I edited the answer, but nothing different from the one I had posted before. I know the answers should be clear and explanatory, but it is also not to leave totally chewed or fill sausage with information that is not important. But that’s okay..

1

Note the correct way to call the event. If the case is to fire while showing a new modal, right 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>
<script src="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, while shown.bs.modal will trigger the event only after loading the new modal, and this prevents the previous instance from interfering.

Source: Events.

Browser other questions tagged jquery modal

You are not signed in. Login or sign up in order to post.