Sending form per table to the same page without refresh

Asked

Viewed 27 times

0

I am having a small problem starting from the principle of sending form to the same page and displaying the parameters in a modal, however I can not catch them through the post, follows the code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="Meulocalhost/css/style.css">
    <script src="Arquivos/ArquivosUteisParaSites/BibliotecaJS/jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function() {

            var modaladm = document.getElementById('modal-adm');


            var btn = document.getElementById("myBtn-adm");


            var span = document.getElementsByClassName("close-adm")[0];


            span.onclick = function() {
                modaladm.style.display = "none";
            }


            window.onclick = function(event) {
                if (event.target == modaladm) {
                    modaladm.style.display = "none";
                }
            }

            $('#ajax_form').submit(function(e) {


                e.preventDefault();

                var id = $(this).serialize();

                $.ajax({

                    type: 'POST',
                    url: 'teste2.php',
                    data: id,
                    success: function(returnhtml) {

                        alert(id);

                        modaladm.style.display = "block";

                    }

                });

                return false;



            });


        });

    </script>
</head>

<body>
    <div class="table">
        <div class="tbl-header">
            <table cellpadding="0" cellspacing="0" border="0">
                <thead>
                    <tr>
                        <th>checkbox</th>
                        <th>id</th>
                        <th>nome</th>
                        <th>login</th>
                        <th>senha</th>
                        <th>email</th>
                        <th>imagen</th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="tbl-content">
            <table cellpadding="0" cellspacing="0" border="0">
                <form action="recebe.php" method="post" id="ajax_form">
                    <tbody>


                        <?php

                        require_once("Meulocalhost\db\conecta.php");

                        $query_usu = "SELECT * FROM usuarios";

                        $sql_usu = mysqli_query($_conexao,$query_usu) or die (mysqli_error());

                        $rows = mysqli_num_rows($sql_usu);


                            while($_line = mysqli_fetch_array($sql_usu)){

                            if($_line['imagen'] == null){
                                 $_line['imagen'] = "sem imagen";
                                }
                                        ?>

                            <tr>
                                <td>
                                    <input type="radio" name="id_usu" id="id_usu" value="<?php echo $_line['id'];?>">
                                </td>
                                <td>
                                    <?php echo $_line['id'] ?>
                                </td>
                                <td>
                                    <?php echo $_line['nome_comp'] ?>
                                </td>
                                <td>
                                    <?php echo $_line['login'] ?>
                                </td>
                                <td>
                                    <?php echo $_line['senha'] ?>
                                </td>
                                <td>
                                    <?php echo $_line['email'] ?>
                                </td>
                                <td>
                                    <?php echo $_line['imagen'] ?>
                                </td>
                            </tr>

                            <?php

                            }

                        ?>


                    </tbody>
                    <button type="submit">alterar</button>
                </form>
            </table>
        </div>
    </div>
  <span id="result"></span>
        <div id="modal-adm" class="modal">
           <?php

                $id = $_POST['id'];

            ?>
            <div class="modal-content">
                <div class="modal-header">
                    <span class="close-adm">&times;</span>
                    <h2>Modal</h2>
                </div>
                <div class="modal-body">
                    <input type="text" value="<?php echo $id ?>" disabled>
                </div>
                <div class="modal-footer">
                    <h3>Modal Footer</h3>
                </div>
            </div>
        </div>

</body>

</html>
php html ajax

  • you will not catch them by php after the ajax post, you would have to treat the result by javascript. You need to study and understand the server and client scopes, which happens every moment in your application.

1 answer

0

One approach would be to place the div with the class modal-content in a separate file, then the ajax request would access that file, for example, modal.php, and the returned content would be attached to the current page, index.php, for example.

So you could have a file called modal.php, with the following content:

<?php

$id = $_POST['id'];
$campo1 = $_POST['campo1'];

?>
<div class="modal-content">
    <div class="modal-header">
        <span class="close-adm">&times;</span>
        <h2>Modal</h2>
    </div>
    <div class="modal-body">
        <input type="text" value="<?php echo $id ?>" disabled>
    </div>
    <div class="modal-footer">
        <h3>Modal Footer</h3>
    </div>
</div>

And on your main page, index.php, for example, you would have:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="Meulocalhost/css/style.css">
    <script src="Arquivos/ArquivosUteisParaSites/BibliotecaJS/jquery-3.3.1.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>

    <script>
        $(document).ready(function() {

            var modaladm = document.getElementById('modal-adm');


        //parece que não existe este elemento ...
            //var btn = document.getElementById("myBtn-adm");


        //esse elemento só vai existir quando a requisição ajax
            //for feita
            //var span = document.getElementsByClassName("close-adm")[0];
            //span.onclick = function() {
            //    modaladm.style.display = "none";
           // }

        //pode ser substituido por, usando jquery
        $(document).on('click', '.close-adm', function(){
            modaladm.style.display = "none";
            });


            window.onclick = function(event) {
                if (event.target == modaladm) {
                    modaladm.style.display = "none";
                }
            }

            $('#ajax_form').submit(function(e) {


                e.preventDefault();

                var id = $(this).serialize();

                $.ajax({

                    type: 'POST',
                    url: 'modal.php',
                    data: id,
                    success: function(returnhtml) {


                        alert(id);
            //remove todo o conteudo dentro
            //de modaladm, caso exista
            //com jquery
            //modaladm.html('');
            //nativo em javascript

            modaladm.innerHTML = '';

            //adiciona conteudo de returnhtml no 
            //modaladm
            //com jquery
            //modaladm.append(returnhtml);
            //nativo em javascript
            modaladm.innerHTML = returnhtml;
                        modaladm.style.display = "block";

                    }

                });

                return false;



            });


        });

    </script>
</head>

<body>
    <div class="table">
        <div class="tbl-header">
            <table cellpadding="0" cellspacing="0" border="0">
                <thead>
                    <tr>
                        <th>checkbox</th>
                        <th>id</th>
                        <th>nome</th>
                        <th>login</th>
                        <th>senha</th>
                        <th>email</th>
                        <th>imagen</th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="tbl-content">
            <table cellpadding="0" cellspacing="0" border="0">
                <form action="recebe.php" method="post" id="ajax_form">
                        <input type="text" name="id">
            <input type="text" name="campo1">
            <button type="submit">alterar</button>

                </form>
            </table>
        </div>
    </div>
  <span id="result"></span>
        <div id="modal-adm" class="modal">

        </div>

</body>

</html>

In the index.php, has basically the code you put as example, with some parts that were causing syntactic error were removed or fixed, note the comments in the code.

Browser other questions tagged php html ajax

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