PHP - MODAL window

Asked

Viewed 2,354 times

0

I have tried some scripts but unsuccessfully, I ask for forgiveness if you have in any forum already, but I looked for the modal and nothing supplied my need, there goes:

I have a modal inside the Client button, which when 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 within 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>
    <script src="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 select bootstrap-3 input modal

1 answer

1


First: You are printing options out of a select.

Basically, you only need to include an event to select within the modal, when changing the value of select trigera the modal closure and the input fill 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>
    <script src="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>

  • Thanks man, it helped a lot. But what about with a table inside a modal ? I tried to exchange the SELECT command for TABLE and close the TABLE but it didn’t work

  • If you want to use TABLE, you need to put the values in Trs and Tds, and change the event 'change' to 'click' and point to a common classname between the units

  • It is another case, the one of the drive you solved perfectly as wanted expensive, however this case is a table that opens inside the modal with data of the clients system users with the fields NAME, CODE, FANCY NAME, ADDRESS, and then select the desired.

  • is basically the same thing you did up there, only that table structure is different from select, it would be '<table><tr><td></td></tr></table>' TR are the rows, and TD are the columns, you’re using bootstrap 3 ? take a look at fiddle https://jsfiddle.net/AnthraxisBR/am9zpa9s/

  • I took a look there,, however the modal is not selectable as the select, is that I started programming a few months ago in php and never messed with js and php to half lost face... I pasted the code in place of my old doubt without the script

Browser other questions tagged php select bootstrap-3 input modal

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