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?
-
2Teria 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?– RandradeCommented 11/01/2016 às 2:09
-
estou usando o codigo abaixo que o Vini postou– LipearuCommented 14/01/2016 às 21:38
Adicione um comentário
|
1 Resposta
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">×</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>
-
-
coloquei esse código todo em uma pagina e não funcionou. ta faltando alguma coisa @vini-diascanio– LipearuCommented 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– LipearuCommented 11/01/2016 às 18:18
-