0

Tengo dos botones en una tabla los cuales abren una ventana modal, si quiero pasar algún valor que me indique qué botón se ha presionado a la ventana modal, ¿cómo lo obtengo?

Mis botones son de tipo button:

<a href="#" id="link1" data-id="@row.id" data-toggle="modal" data-target="#modalS">
    <button type="button" class="btn btn-success" value="si">Si&nbsp;&nbsp;</button>
</a>
<a href="#" id="link2" data-id="@row.id" data-toggle="modal" data-target="#modalSi">
    <button type="button" class="btn btn-danger" value="no">No</button>
</a>

y los coloco dentro de un elemento para que me abra mi ventana modal

<!--modal-->
<div class="modal fade bs-example-modal-lg" id="modalSi" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
            </div>
            <div class="modal-body">
                <!-- formulario modal -->
                <!-- inicia panel -->
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h4>Reporte</h4>
                    </div>
                    <div class="panel-body">
                        <div class="alert alert-info" role="alert"><i class="glyphicon glyphicon-asterisk"></i>Seleccione una opción</div>
                        <form id="envia" name="envia" method="post" action="" class="form-horizontal">
                            <input type="hidden" name="hddCliente" id="hddCliente" />

                            <div class="form-group">
                                <label for="lblAplicar" class="control-label col-sm-2">Aplicar</label>
                                <div class="input-group date col-sm-10">
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-th-list"></span>
                                    </span>
                                    <select name="tipo" size="1" id="tipo" class="form-control">
                                        <option value="">--Seleccionar--</option>
                                        <option value="1">Buzón</option>
                                        <option value="2">Fuera de servicio / número ha cambiado</option>
                                        <option value="3">No contesta</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-2"></label>
                                <div class="col-sm-10">
                                    <!--<input type="button" name="Submit" value="Buscar" id="btn-enviar" class="btn btn-success" />-->
                                    <button type="submit" class="btn btn-success">Guardar</button>
                                </div>
                            </div>

                            <div class="alert alert-info" role="alert"><i class="glyphicon glyphicon-asterisk"></i>Resumen del registro</div>

                            <div class="form-group">
                                <label for="lblfechaSolicitudi" class="control-label col-sm-2">Nombre</label>
                                <div class='input-group date col-sm-10' id='datetimepickerfi'>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-user"></span>
                                    </span>
                                    <input type='text' id="txtNombre" name="txtNombre" class="form-control" disabled />

                                </div>
                            </div>

                            <div class="form-group">
                                <label for="lblfechaSlicitudf" class="control-label col-sm-2">Telefono</label>
                                <div class='input-group date col-sm-10' id='datetimepickerff'>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-phone"></span>
                                    </span>
                                    <input type='text' id="txtTelefono" name="txtTelefono" class="form-control" disabled />
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="lblfechaSlicitudf" class="control-label col-sm-2">Fecha Activación</label>
                                <div class='input-group date col-sm-10' id='fecha'>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                    <input type='text' id="txtFechaa" name="txtFechaa" class="form-control" disabled />
                                </div>
                            </div>


                        </form>
                    </div>
                </div>
                <!-- termina panel -->
                <!--fin formulario modal-->
            </div>
        </div>
    </div>
</div>
<!--modal-->

JS

  $(document).ready(function () {
            $('#modalSi').on('show.bs.modal', function (e) {
                /* aqui obtengo el valor */
                var link = $(event.relatedTarget);
                var btn = $(link).find('button').val();
                console.log($(e.currentTarget).find('#hddBoton').val(btn));
                $(e.currentTarget).find('#hddBoton').val(btn)
                // termina obtener valor

                var id = $(e.relatedTarget).data().id;
                hola.children().each(function () {

                    var celdas = hola.children();
                    console.log($(celdas[4]).text());
                    $(e.currentTarget).find('#txtNombre').val($(celdas[0]).text());
                    $(e.currentTarget).find('#txtTelefono').val($(celdas[1]).text());
                    $(e.currentTarget).find('#txtFechaa').val($(celdas[3]).text());
                });

            });
   });

seleccione el botón no y esto son los valores que me obtiene introducir la descripción de la imagen aquí

1
  • 1
    Hola, creo que deberías incluir la parte de tu HTML en la cual se encuentra el modal al que estás haciendo referencia: #modalS
    – César
    el 22 feb. 2016 a las 18:10

1 respuesta 1

1

Si el modal es de Bootstrap se puede obtener el elemento presionado con

var link= $(event.relatedTarget);

En este caso sería el elemento a

Si se desea el botón que contiene puede obtenerse con

$(link).find('button');

A partir de ahí es cuestión de buscar una forma de identificarlos. En este caso puede hacerlo con el atributo value de la siguiente forma

var btn= $(link).find('button').val();
//En base a su código, haciendo esto btn contendría 'si' o 'no'

Aquí puede ver la documentación relacionada

9
  • 1
    No he podido dejar un comentario por falta de reputación pero a tu pregunta le falta un poco de detalle. La única razón por la cual entendí es porque recuerdo tu pregunta anterior, relacionada también con modales.
    – ibooio
    el 22 feb. 2016 a las 18:19
  • me obtiene los dos valores de los botones
    – Drago25
    el 22 feb. 2016 a las 19:01
  • ¿Cómo los dos valores? Dentro de cada link hay un único valor. ¿Podrías editar y agregar la sección donde tratás de obtener el valor?
    – ibooio
    el 22 feb. 2016 a las 19:16
  • ya coloque como estoy recuperando el valor
    – Drago25
    el 22 feb. 2016 a las 19:41
  • ¿Qué escribe console.log(btn)?
    – ibooio
    el 22 feb. 2016 a las 19:48

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.