Bom dia amigos, Estou com uma dúvida para enviar parâmetros URL como se fosse um;
<a href=\"pagina.php?id=$id\" >enviar</a>
Só que ao invés de enviar para outra página, gostaria de enviar para um modal na mesma página. Alguma dica?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeBom dia amigos, Estou com uma dúvida para enviar parâmetros URL como se fosse um;
<a href=\"pagina.php?id=$id\" >enviar</a>
Só que ao invés de enviar para outra página, gostaria de enviar para um modal na mesma página. Alguma dica?
Um exemplo passando o "parâmetro" para o value
de um input
seria assim:
<?php
session_start();
$connect = new mysqli ("localhost", "USUARIO", "SENHA", "NOME_DB");
if (isset($_POST["campo"])) {
$id = $_POST["campo"];
$_SESSION["id"]=$id;
echo '<script>window.open("usuario/usuario.php");</script>';
}
?>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
function setaDadosModal(valor) {
document.getElementById('campo').value = valor;
}
</script>
<?php
$sql2="select * from nomeTabela";
$listar=mysqli_query($connect,$sql2);
$tabela .= '<div style="float: center" table align="center">';
$tabela .= '<table border="1">';
$tabela .= '<tr>';
$tabela .='<thead>';
$tabela .= '<tr>';
$tabela .= '<th>nome</th>';
$tabela .='</thead>';
$tabela .='<tbody>';
while($rows = mysqli_fetch_assoc($listar)) {
$tabela .= '<tr>';
//$tabela .= '<td><a data-toggle="modal" data-target="#myModal" class="btn btn-primary" onclick="setaDadosModal(\''.$rows['id'].'\')">'.$rows['nome'].'</a></td>';
$tabela .= '<td><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" onclick="setaDadosModal(\''.$rows['id'].'\')">'.$rows['nome'].'</button></td>';
}
$tabela .= '</tr>';
$tabela .='</tbody>';
$tabela .= '</table>';
$tabela .= '</div>';
echo $tabela;
mysqli_close($connect);
?>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">ID</h4>
</div>
<form method="post" action="" autocomplete="off">
<div class="modal-body">
<div class="md-form ml-0 mr-0">
<input type="text" name="campo" id="campo">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success btn-rounded waves-effect waves-light" ><span class="btn-label"><i class="fa fa-send"></i></span> Enviar</button>
<button type="button" class="btn btn-success waves-effect waves-light" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
Você precisa usar JS para isso, pois o modal não trafega dados por padrão.
Dá pra fazer isso tudo com apenas JS, mas para simplificar, vou dar uma ideia de como usar o mínimo de JS e simplificar seu trabalho:
Considerando que você usa Boostrap
.
O seu HTML será algo assim:
<a class="btn btn-primary" id="botaoAbreModal" data-toggle="modal" href='#meuModal' data-id="SUA VARIAVEL">Abre Modal</a>
<div class="modal fade" id="meuModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<form>
/* Vamos colocar o input aqui dinamicamente */
</form>
</div>
</div>
</div>
</div>
Quando o Modal for aberto, você pega o evento dele e injeta no seu form como um input, assim:
$(window).on('shown.bs.modal', function () {
var id = $('#botaoAbreModal').attr('data-id');
$('#meuModal form').append(`<input type="hidden" name="id" value="${id}"`);
});