Send URL parameter of a table to a modal

Asked

Viewed 394 times

0

Good morning friends, I have a question to send URL parameters as if it were a;

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

Only instead of sending to another page, I would like to send to a modal on the same page. Any hints?

url modal parameters

  • What to put into the modal? Inside an input?

  • Hey, Leo, what’s up? So, imagine you have a table with several names, there to change user information, put the ID in href and send to another page, right? However, I need to instead of sending to another page, open a modal with the form that already has the user ID and then send it to another page that will do the update or Insert, anyway. Just open the modal already with table ID information. Ta confusing, I know kkkkk

  • I edited the answer to adapt your need.

  • If any answer solved your problem, mark it as accepted. See how and why in https://pt.meta.stackoverflow.com/questions/1078/como-e-por-que-aceitar-uma-resposta/1079#1079

2 answers

1

An example passing the "parameter" to the value of a input would be so:

<?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>

0

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

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

Whereas 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 opens, 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}"`);
    });

Browser other questions tagged url modal parameters

You are not signed in. Login or sign up in order to post.