tengo un archivo html, con un botón modal que cuando lo pulsas se abre un modal en el cual tiene un formulario, con un campo input y un botón buscar, cuando pulsas en el botón buscar te muestra en otra pagina los datos enviados por post, esa es mi idea.
El primer archivo contiene el botón modal que al pulsarlo va al segundo archivo que contiene el cuerpo del modal con el formulario de búsqueda, al insertar los datos y pulsar en el botón buscar mostraría los datos enviados por post, pero el problema es que en mi caso muestra:
Not Found The requested URL was not found on this server.
/* funcion que se encarga de cargar el contenido del modal desde un archivo externo */
function mostrarModal(id, ruta) {
// se encarga de apuntar a la etiqueta el contenido que se va a cargar en ella
$(id).load(ruta, function () {
// se encarga de mostrar el contenido en el cuerpo del modal
$(id).modal('show');
});
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- aqui va la imagen de pestaña -->
<link rel="icon" href='../php/funciones/assets/faviconArenas.png'>
<!-- bootstrap importado css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- aqui importamos la libreria de jquery -->
<link rel="stylesheet" href="../css/index.css" type="text/css">
</head>
<!-- bootstrap importado js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<body>
<div class='botones my-3 text-end'>
<!-- Boton que al pulsarlo abre el modal para buscar a un jugador -->
<button type='button' class='btn btn-primary' data-bs-toggle='modal' onclick='mostrarModal("#btnBuscar","../buscar/buscar.php")'>
Buscar por nombre jugador
</button>
<!-- cuerpo del modal de el boton buscar -->
<div class="modal fade" id="btnBuscar" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true"></div>
</div>
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
</html>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form role="form" action="procesoBuscar.php" method="post" enctype="multipart/form-data">
<div class="modal-body">
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
</span>
<input type="text" class="form-control" name="txtNombreAbBuscar" placeholder="Introduce el nombre del jugador" aria-label="buscador" aria-describedby="addon-wrapping">
</div>
</div>
<div class="modal-footer">
<button type="submit" name="submit" value='hello' class="btn btn-primary" id="busqueda">Buscar jugador</button>
</div>
</form>
</div>
</div>
</div>
<?php
if (isset($_POST['txtNombreAbBuscar'])){
print_r($_POST['txtNombreAbBuscar']);
}
?>
ruta
exactamente? Y, ¿por qué ese lío de ventanas que se abren por aquí y por allá? ¿No es mejor tener todo integrado en un solo contenedor? Los modales datan de los años 90, con el boom de Windows, pero hoy, un modal sólo tendría sentido como cuadro de diálogo obligatorio antes de pasar a una acción, no como contenedor o solicitador de datos. No entiendo ese empeño de seguir programando como en los 90. Los modales son una pésima experiencia de usuario hoy día.console.log(ruta);
revisa la consola, copia/pega para probar esa ruta en el navegador.ruta
no parece ser una ruta absoluta, conviene que nos digas cómo están organizados tus archivos, ¿el HTML en qué carpeta está? Según esto:../buscar/buscar.php
en el directorio padre del HTML debe haber una carpetabuscar
y allí un archivo llamadobuscar.php
. Muéstranos tu árbol de directorios y archivos.