[Berman]

Hola buenas he estado buscando pero no encuentro una solución para mi problema.
tengo un div en el que muestro un listado de músicos por genero. El usuario elige un genero con un select y le da a consultar y se muestran.

Esto me funciona pero quiero que el botón del submit no recargue la pagina. He pensado que podria usar un button con un onclick y ejecutar una funcion javascript con todo el php dentro de la funcion.

Código PHP:

Ver original
<div id="listadoMusicos">
                <center>
                    <h1>Listado de Músicos por Género</h1>
                    <form method="POST">
                        Listado de músicos del género <select name="genero">
                            <?php
                            $listadoGeneros = recogerGenero();
                            while ($fila = mysqli_fetch_assoc($listadoGeneros)) {
                                echo "<option value='" . $fila['idgenero'] . "'>";
                                echo $fila['nombre'];
                                echo "</option>";
                            }
                            ?>
                        </select><br>
                    </form>
                    <button onclick="funcionMostrarTabla()">Consultar</button>
                    <script>
                        function funcionMostrarTabla() {
                            //como hacer que el php de abajo funcione aqui dentro
                            
                        }
                    </script>    
                    <?php
                    $listadoMusicos = recogerMusicosPorGenero($_POST['genero']);
                    ?>
                    <table border='1' cellspacing='0'>
                        <tr>
                            <th>Músico</th><th>Numero de componentes</th><th>Web</th>
                        </tr>
                        <?php
                        while ($fila = mysqli_fetch_assoc($listadoMusicos)) {
                            echo "<tr align='center'>";
                            foreach ($fila as $dato) {
                                echo "<td>" . $dato . "</td>";
                            }
                            echo "</tr>";
                        }
                        ?>
                    </table>
                </center>
            </div>
 

[hhs]

Tienes que usar ajax

[sarrhen]

Utiliza jquery Ajax y coloca un identificador para obtener un elemento del DOM

Código Javascript:

Ver original
<script>
    $(document).ready(function () {
        $("button").click(function () {
            var Correlativo_TD = $("#ELEMENTO DEL DOM").text();
              var parametros = {
                "Correlativo_Insertar_Ingreso_Inicial": Correlativo_TD
                            };
            $.ajax({
                data: parametros,
                url: 'URL DONDE MANDAS ',
                type: 'post',
                beforeSend: function () {
                    $("#resultado").html("Ingresando datos");
                    $("#txt_Matriculas_Mas").val("");
                },
                 });
        });
    });
 

Yo utilizo esto y me funciona