PHP - MODAL window

Question

PHP - MODAL window

Navigation

#1 by (1 votes)

0

I have tried some scripts but I have not tried it, I apologize if it has already been in a forum, but I looked for modal and nothing suited my need,

I have a modal inside the button Client, which upon clicking loads a table with data coming from the database, wanted to know which script to use to make this table receive click and add what was selected inside the input

   <!DOCTYPE html>
<html lang="en">
<head>
    <title>Modal do Vitão</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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>
    <style>
        .modal .modal-dialog { width: 60%; }
    </style>
</head>
<body>                    
                <div class="container">
                <h2>Modal</h2>

                <div class="modal fade" id="Modal" role="dialog">
                    <div class="modal-dialog">

                        <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <table class="table">
                            <?php
                              include ("conn.php");

                                    echo "<table border = 1>";
                                    echo "<tr>";
                                    echo "<th>Código</th>";
                                    echo "<th>Nome Fantasia</th>";
                                    echo "<th>Cliente</th>";
                                    echo "<th>Código Interno</th>";
                                    echo "<th>Endereço</th>";
                                    echo "</tr>";

                                $result = "SELECT codigo, nome_fantasia, cliente, codigo_interno, nome_logr from cadcli";
                                $resultado = mysqli_query($conn, $result);

                                while($row = mysqli_fetch_assoc($resultado)) {
                                    $codigo = $row['codigo'];
                                    $nome_fantasia =  $row['nome_fantasia'];
                                    $cliente= $row['cliente'];
                                    $codigo_interno = $row['codigo_interno'];
                                    $nome_logr = $row['nome_logr'];

                                    echo"</tr>";
                                    echo "<td>$codigo</td>";
                                    echo "<td>$nome_fantasia</td>";
                                    echo "<td>$cliente</td>";
                                    echo "<td>$codigo_interno</td>";
                                    echo "<td>$nome_logr</td>";
                                    echo "</tr>";
                                }
                            ?>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                    </div>
                </div>

                    </div>
                </div>

                <button type="button" class="" data-toggle="modal" data-target="#Modal">Cliente >></button><br/>
                <input type="text" name="cliente">
                </div>

php input select bootstrap-3 modal

asked by anonymous 14.09.2017 / 15:20

1 answer

First visit message on the site Mysql error - phpmyadmin: Access denied!

score 1 · Accepted Answer

First: You are printing options outside of a select.

Basically, you only need to add an event to the select within the modal, by changing the value of the select trigera the closing of the modal and filling the input with the selected value:

Even your code but doing what you want, see at the end the jQuery trigger, and the classnames added to the input and select:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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>
    <style>
        .modal .modal-dialog { width: 50%; }
    </style>
</head>
<body>

    <div class="container">
        <h2>Modal</h2>
        <!-- Trigger the modal with a button -->
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Unidade</button>
        <input type="text" class="form-control unidade-input" name="unidade">
        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <label class="modal-title">Unidade</label>

                    </div>
                    <div class="modal-body">
                        <select class='select-input'>
                        <?php
                          include ("conn.php");
                          $result = "SELECT * FROM cadunid ORDER BY descricao";
                          $resultado = mysqli_query($conn, $result);
                          while($row = mysqli_fetch_assoc($resultado)) {
                          echo '<option value="'.$row['codigo'].'">'.$row['descricao'].'</option>';
                          }

                        ?>
                        </select>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                    </div>
                </div>

            </div>
        </div>

    </div>

</body>
<script>
    $(document).on('change', '.select-input', function () {
        var value = $(this).val();
        $('.close').trigger('click');
        $('.unidade-input').val(value);
    });
</script>