Send URL parameter of a table to a modal

0

Good morning, friends, I'm having a doubt to send URL parameters as if it were one;

<a href=\"pagina.php?id=$id\" >enviar</a>

Except that instead of sending to another page, I would like to send to a modal on the same page. Any tips?

    
asked by anonymous 12.04.2018 / 16:19

2 answers

1

An example passing the "parameter" to value of a input would look like this:

<?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><scriptsrc="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>
    
12.04.2018 / 16:45
0

You need to use JS for this, as the modal does not traffic data by default.

You can do it all with just JS, but for simplicity, I'll give you an idea of how to use the minimum JS and simplify your work:

Considering that you use Boostrap .

Your HTML will look something like this:

<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">&times;</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>

When Modal is opened, you take its event and inject it into your form as an input, like this:

 $(window).on('shown.bs.modal', function () {
        var id = $('#botaoAbreModal').attr('data-id');
        $('#meuModal form').append('<input type="hidden" name="id" value="${id}"');
    });
    
12.04.2018 / 16:51