1

tengo el siguiente problema. Tengo una página con un formulario y dentro de este varios botones, uno de ellos es para levantar una ventana modal para aplicar distintos filtros. El caso es que si pincho en este botón, me levanta la ventana modal pero acto seguido ejecuta el formulario, lo que me recarga la página al completo y no me permite realizar ningún filtro. Si elimino el formulario de la página, me deja la ventana modal levantada y puedo filtrar sin problemas.

Esta es la página en la que tengo tanto el formulario, botón y ventana modal de filtros:

<div class="content-wrapper">

    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Participantes</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="<?= base_url() ?>">Inicio</a></li>
              <li class="breadcrumb-item">Participantes</li>
              <li class="breadcrumb-item active">Listado Participantes</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>
    <!-- Main content -->
    <section class="content">
      <form method="POST" id="Formulario_pagina">       
      <div class="container-fluid">
        <!-- /.row -->
        <div class="row">
          <div class="col-12">
            <div class="card">
               <div class="card-header">
                <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#crearAdministrador">Crear nuevo Participante</button>
                <button name="filtrar" id="filtrar" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#aplicar_filtro">Filtrar</button>
                <button class="btn btn-primary btn-sm" onclick="window.location='<?= base_url() ?>menu/participantes';">Quitar Filtros</button>
                <button id="btn_envio_email_masivo" class="btn btn-primary btn-sm">Email masivo</button>                               
              </div>
              <!-- /.card-header -->
              <!-- <div class="card-body table-responsive p-0" style="height: 1200px;"> -->
              <div class="card-body table-responsive p-0">

                <!-- Si no encontramos ningún resultado sacamos un aviso -->
                <?php
                    if (!isset($datos_listado) or (count($datos_listado) == 0 ))
                    {
                      ?>

                        <div class="alert alert-warning alert-dismissible">
                            <!-- <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> -->
                            <h5><i class="icon fas fa-exclamation-triangle"></i> Mensaje!</h5>
                      No se ha encontrado ningún registro
                        </div>
                    <?php 
                    }
                    else
                    {
                ?>

                <table class="table table-head-fixed text-nowrap">
                  <thead>
                    <tr>
                        <th><input type="checkbox" id="seleccionar_todos"></th>
                        <th>Dorsal</th>
                        <th>Nombre</th>
                        <th>CIF</th>
                        <th>Email</th>
                        <th>Teléfono</th>

                    </tr>
                  </thead>
                  <tbody>

                        <?php
                          foreach ($datos_listado as $row) {
                        ?>  
                          <tr>
                              <td><input class="case" type="checkbox" name="participante_seleccionado[]" value="<?= $row['id_usuario'] ?>" id="<?= $row['id_usuario'] ?>"></td>
                              <td><?= $row['dorsal'] ?></td>
                              <td><?= $row['nombre']." ".$row['apellidos']." ".$row['apellido2'] ?></td>
                              <td><?= $row['DNI'] ?></td>
                              <td><?= $row['email'] ?></td>
                              <td><?= $row['telefono'] ?></td>                              
                              <td>
                                  <div class="btn-group">
                                    <button class="btn-warning btn-sm">
                                        <i class="fas fa-pencil-alt text-white"></i>
                                    </button>
                                    <button class="btn-info btn-sm">
                                        <i class="fas fa-envelope"></i>
                                    </button>
                                    <button class="btn-danger btn-sm">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                                                  
                                  </div>

                              </td>
                          </tr>                       
                        <?php 
                          }
                        ?>

                  </tbody>
                </table>
                <script>


                      $('#btn_envio_email_masivo').click(function(){
                         $('#Formulario_pagina').attr('action', '<?= base_url() ?>participantes/seleccion_multiple');
                      });    
                      

                      $("#seleccionar_todos").on("click", function() {  
                        $(".case").prop("checked", this.checked);  
                      });  

                      // if all checkbox are selected, check the selectall checkbox and viceversa  
                      $(".case").on("click", function() {  
                        if ($(".case").length == $(".case:checked").length) {  
                          $("#seleccionar_todos").prop("checked", true);  
                        } else {  
                          $("#seleccionar_todos").prop("checked", false);  
                        }  
                      }); 

                      $("#filtrar").click(function() {
                            $("#aplicar_filtro").modal('show');
                      };
                            
                </script>    
                <?php
                  }
                ?>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
        </div>
        <!-- /.row -->
      </form>
      </div>

    <!-- *************************************************

            VENTANA MODAL APLICAR FILTROs
            FFFFFFFFFFFFFFFFFFFFFFFFFFFF
            FFFFFFFFFFFFFFFFFFFFFFFFFFFF
            FFF
            FFF
            FFF
            FFF
            FFF
            FFFFFFFFFFFFFFFFFFFFFFFFFFFF
            FFFFFFFFFFFFFFFFFFFFFFFFFFFF
            FFF
            FFF
            FFF
            FFF
            FFF
            FFF
            FFF
            FFF
            FFF
            FFF


         ************************************************* -->

      <div class="modal" id="aplicar_filtro">
        <div class="modal-dialog">

          <div class="modal-content">
             <form method="POST" action="<?= base_url() ?>menu/participantes">       
                <div class="modal-header bg-info">
                  
                  <h4 class="modal-title">Aplicar Filtros a Listado</h4>
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <div class="modal-body">

                    <div class="input-group mb-3">
                      
                      <div class="input-group-append input-group-text">
                        <i class="fa fa-user"></i>    
                      </div>
                    
                      <input id="aplicar_filtro_nombre" type="text" class="form-control" name="aplicar_filtro_nombre" value="" autocomplete="nombre" autofocus placeholder="Nombre">

                      <span class="invalid-feedback" role="alert"> Error </span>

                    </div>

                    <div class="input-group mb-3">
                      
                      <div class="input-group-append input-group-text">
                        <i class="fa fa-user"></i>    
                      </div>
                    
                      <input id="aplicar_filtro_apellido1" type="text" class="form-control" name="aplicar_filtro_apellido1" value="" autocomplete="apellido1" autofocus placeholder="Primer Apellido">

                      <span class="invalid-feedback" role="alert"> Error </span>

                    </div>

                    <div class="input-group mb-3">
                      
                      <div class="input-group-append input-group-text">
                        <i class="fa fa-user"></i>    
                      </div>
                    
                      <input id="aplicar_filtro_apellido2" type="text" class="form-control" name="aplicar_filtro_apellido2" value="" autocomplete="apellido2" autofocus placeholder="Segundo Apellido">

                      <span class="invalid-feedback" role="alert"> Error </span>

                    </div>

                   <div class="input-group mb-3">
                      
                      <div class="input-group-append input-group-text">
                        <i class="fa fa-envelope"></i>    
                      </div>
                    
                      <input id="aplicar_filtro_email" type="text" class="form-control" name="aplicar_filtro_email" value="" autocomplete="email" autofocus placeholder="Correo electrónico">

                      <span class="invalid-feedback" role="alert"> Error </span>

                    </div>

                   <div class="input-group mb-3">
                      
                      <div class="input-group-append input-group-text">
                        <i class="fa fa-dot-circle"></i>    
                      </div>
                    
                      <input id="aplicar_filtro_dorsal" type="text" class="form-control" name="aplicar_filtro_dorsal" value="" autocomplete="dorsal" autofocus placeholder="Dorsal">&nbsp;
                            <?php
                              $cadena = "Sólo 1 número: Busca ese dorsal &#10 ";
                              $cadena .= "> [número]: Busca Dorsales mayores al [número] &#10 ";
                              $cadena .= "< [número]: Busca Dorsales menores al [número] &#10 ";
                              $cadena .= "[número] - [número]: Busca Dorsales entre los [números] &#10 ";
                            ?>
                                <div class="btn-group">
                                    <i class="fas fa-info-circle" style="align:center;" title="<?= $cadena ?>">
                                    </i>
                                </div>

                      <span class="invalid-feedback" role="alert"> Error </span>

                    </div>                    
                 
                    <div class="input-group mb-3">
                      <div class="form-group">
                        <label>Eventos</label>
                        <select multiple name="aplicar_filtro_eventos[]" id="aplicar_filtro_eventos" class="form-control">
                          <?php 

                              foreach ($filtro_eventos as $eventos)
                              {
                          ?>
                              <option value="<?= $eventos['id_evento']?>"><?= $eventos["nombre"] ?></option>
                          <?php
                              }
                          ?>
                        </select>
                      </div>
                    </div>

                    <div class="input-group mb-3" >
                      <div class="form-group">
                        <label>Inscrito o Pendiente</label>
                        <select name="aplicar_filtro_inscrito" id="aplicar_filtro_inscrito" class="form-control">
                          <option>Selecciona un valor</option>
                          <option>Inscritos</option>
                          <option>Pendientes</option>
                        </select>
                      </div>
                    </div>                    

                    <div class="input-group mb-3">
                      <div class="form-group">
                        <label>Marcas de Moto</label>
                        <select multiple name="aplicar_filtro_marca[]" id="aplicar_filtro_marca" class="form-control">
                          <option value="Aprilia" >Aprilia</option>
                          <option value="Benelli" >Benelli</option>
                          <option value="BMW" >BMW</option>
                          <option value="Cagiva" >Cagiva</option>
                          <option value="Can-Am" >Can-Am</option>
                          <option value="Ducati" >Ducati</option>
                          <option value="Gilera" >Gilera</option>
                          <option value="Harley-Davidson" >Harley-Davidson</option>
                          <option value="Honda" >Honda</option>
                          <option value="Hyosung" >Hyosung</option>
                          <option value="Kawasaki" >Kawasaki</option>
                          <option value="KTM" >KTM</option>
                          <option value="Kymco" >Kymco</option>
                          <option value="Royal-Enfield" >Royal Enfield</option>
                          <option value="Suzuki" >Suzuki</option>
                          <option value="Triumph" >Triumph</option>
                          <option value="Vespa" >Vespa</option>
                          <option value="Yamaha" >Yamaha</option>
                          <option value="Otra" >Otra</option>
                        </select>
                      </div>
                    </div>                    
                    
                </div>

                <div class="modal-footer d-flex justify-content-between">

                  <div>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                  </div>

                  <div>
                    <button type="submit" class="btn btn-primary">Aplicar</button>
                  </div>              
                  
                </div>
              </form>
          </div>
          

        </div>
      </div>      

    </section>
    <!-- /.content -->
</div>

<script src="<? base_url() ?>plugins/funciones.js"></script>

El motivo de meter un formulario en la página es para poder gestionar luego una posible selección múltiple con los checks que hay en el listado que se muestra en la página. No sabría como hacerlo de otra manera.

¿Cómo podría hacer para que ese botón mostrara el modal pero no ejecutara el formulario?

Muchísimas gracias de antemano!!!!

2
  • 1
    Prueba incluyendo en el boton que levanta el popup, event.preventDefault(), de esa forma evitas el envio Commented el 25 jun. 2020 a las 19:31
  • Paulo Urbano Rivera, muchísimas gracias por tu comentario. Ha funcionado correctamente!!!! Commented el 26 jun. 2020 a las 17:58

1 respuesta 1

1

Finalmente cambiando este código

                  $("#filtrar").click(function() {
                        $("#aplicar_filtro").modal('show');
                  };

por este otro:

                  $("#filtrar").click(function() {
                        event.preventDefault();
                  });

Se consigue el efecto requerido.

Muchas gracias al amigo Paulo Urbano Rivera por su ayuda!!!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.