Bootstrap Modal with input content [closed]

Navigation
0

Good evening. I have an HTML page that has a text input and a button. in this input I write the client name and the button it opens a modal to make a registration. I would like to already put the client name that I typed in the input in the modal?

    
asked by anonymous 11.01.2016 / 02:54

1 answer

1

Via jQuery, instead of just triggering the modal, you can make it at the time that when the user clicks the modal button, also capture the value of the input and then you put it in some place that you want : 

$('#myModal').on('shown.bs.modal', function() {
  var nomeUsuario = $("#myInput").val();
  $(".target-nome").text(nomeUsuario);
});
<link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>


<p>
  <label for="myInput">Seu nome aqui</label>
  <br />
  <input id="myInput" />
</p>
<!-- 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">
        <h1 class="target-nome">NOME DO INPUT</h1>
      </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>

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
    
11.01.2016 / 04:19
Disappearing two divs with jquery How to understand the WildFly8x server error message?