0

boa noite. tenho uma pagina em HTML que tem um input do tipo texto e um botão. nesse input escrevo o nome do cliente e o botão ele abre um modal pra fazer um cadastro. teria como já no modal ele colocar o nome do cliente que eu digitei no input?

2
  • 2
    Teria como colocar o código que já possui? Esse nome seria por valor do input, querystring, post de alguma linguagem... Poderia fornecer mais informações que nos ajudam?
    – Randrade
    Commented 11/01/2016 às 2:09
  • estou usando o codigo abaixo que o Vini postou
    – Lipearu
    Commented 14/01/2016 às 21:38

1 Resposta 1

1

Via jQuery, ao invés de apenas disparar o modal, você pode fazer com que na hora que quando o usuário clique no botão do modal, também capture o value do input e depois você coloca ele dentro de algum lugar que você você queira:

$('#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>

6
  • Obrigado @vini-diascanio, funcionou aqui, mas nao pra min .
    – Lipearu
    Commented 11/01/2016 às 16:47
  • coloquei esse código todo em uma pagina e não funcionou. ta faltando alguma coisa @vini-diascanio
    – Lipearu
    Commented 11/01/2016 às 16:52
  • Verifica o seletores, você alterou pra sua estrutura? Se o nome das classes e id estão certinhos Commented 11/01/2016 às 17:21
  • deu certo. coloquei a função no final da pagina. estava dentro do <head> Obrigado
    – Lipearu
    Commented 11/01/2016 às 18:18
  • Que bom man! De nada! Commented 11/01/2016 às 22:14

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .