1

tengo un formulario con boostrap4 donde a partir de un botón lanzo un formulario modal. El formulario tiene varios botones y solo necesito obtener un parámetro que lo tengo como "data-groupid"

El botón lo genero de esta forma

     <a href="#" class="btn btn-primary" data-toggle="modal" 
            data-groupid = {{$group[0]['group']}}  data-target="#exampleModal">
     <i class="fa fa-arrow-up"></i>
      {{$group[0]['group']}}</a>

Luego tengo un formulario modal incrustado arriba de todo del fichero

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modificar alimento</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Mi idea es obtener el evento donde se muestra el form modal y obtener el valor enviado por el botón.

Para ello tengo localizado el evento que es este

    $('#exampleModal').on('show.bs.modal', function (e) {
     console.log(e);
});

Ahora me falta como hacer en este trozo de código, poder obtener el valor enviado por el botón en data-groupid

Gracias

3
  • Si el atributo lo tienes en la etiqueta <a>, sería más fácil que escuches el evento click en esa etiqueta para obtener el valor del atributo. el 6 may. 2020 a las 18:04
  • Fijate que les tenes que poner el id y name a los controles, tambien type=submit.. proba con eso y $Post te apareceran los valores. Saludos
    – JorgeV
    el 6 may. 2020 a las 18:07
  • El problema lo tengo que necesito el evento del form modal (show) ja que cuando se muestre el formulario quiero hacer una acción con el ID del botón
    – ilernet
    el 6 may. 2020 a las 18:19

1 respuesta 1

2

Puede haber mejores maneras de hacer esto, pero puedes asignar el valor del atributo de cada botón en evento click del botón:

var groupid = null;
$('.abrir-modal').on('click', function() {
  groupid = $(this).data("groupid");
  $("#groupid").html(groupid);
})

$('#exampleModal').on('show.bs.modal', function (e) {
  alert('se abrió el modal desde el botón con valor: '+ groupid);
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" crossorigin="anonymous"></script>



<a href="#" class="btn btn-primary abrir-modal" data-toggle="modal" data-groupid ="1" data-target="#exampleModal">
<i class="fa fa-arrow-up"></i>Botón con valor 1</a>

<a href="#" class="btn btn-primary abrir-modal" data-toggle="modal" data-groupid ="2" data-target="#exampleModal">
<i class="fa fa-arrow-up"></i>Botón con valor 2</a>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modificar alimento</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Group id: <b id="groupid"></b></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

1
  • Muchas gracias, era justo lo que necesitava. 1000 gracias
    – ilernet
    el 6 may. 2020 a las 20:05

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.