Sending a form per table for the same page without refresh

Question

Sending a form per table for the same page without refresh

Navigation

#1 by (0 votes)

0

I'm having a little problem that starts with sending the form to the same page and displaying the parameters in a modal, but I can not get them through the post, follow 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

asked by anonymous 31.05.2018 / 15:49

1 answer

Organize multiple images in Android Studio POST with AngularJS and Laravel

score 0 · Answer 1

One approach would be to put the div with class modal-content into a separate file, so the ajax request would access that file, for example, modal.php , and the content returned would be appended to the current page, index.php, by example.

Then you could have a file named 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 home 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 index.php , you basically have the code you put as an example, with some parts that were causing syntactic error were removed or corrected, look at the comments in the code.