Trigger onClick event when Enter keypress in a Twitter Bootstrap Modal

Question

I've a few modals build on top of Twitter Bootstrap Modal, each have at least one submit button which is the default action I need to trigger in most cases since the second button is for go back (dismiss the modal), how, on a modal, when I hit enter I can trigger whatever action that submit has? For example right now, as they are button I have something like:

$("#btn").on("click", function(e){
    e.preventDefault(); // wait... not send form yet, will be a Ajax call
});

Any help? Example code?

For reference, this is the modal content (I using with Twig as part of a Symfony2 project so don't worry about {{ }}):

<div class="modal fade " id="addNorma" tabindex="-1" role="dialog" aria-labelledby="addNorma" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">{{ 'boton.cerrar'|trans({}, 'AppBundle') }}</span></button>
                <h4 class="modal-title" id="myModalLabel">{{ 'modal.normas.titulo'|trans({}, 'AppBundle') }}</h4>
            </div>
            <div class="modal-body">
                <form id="buscadorNorma" method="POST">
                    <div class="spacer10"></div>
                    <div class="row">
                        <div class="col-md-5 col-lg-5 col-sm-5 col-xs-5">
                            <label for="codigo_norma">{{ 'modal.normas.codigo'|trans({}, 'AppBundle') }}</label>
                            <input type="text" class="form-control" id="codigo_norma" name="codigo_norma" placeholder="{{ 'modal.normas.codigoPlaceholder'|trans({}, 'AppBundle') }}">
                        </div>
                        <div class="col-md-5 col-lg-5 col-sm-5 col-xs-5 col-md-offset-2">
                            <label for="ano_publicacion">{{ 'modal.normas.anno'|trans({}, 'AppBundle') }}</label>
                            <input type="text" class="form-control" id="ano_publicacion" name="ano_publicacion" placeholder="{{ 'modal.normas.annoPlaceholder'|trans({}, 'AppBundle') }}">
                        </div>
                    </div>
                    <div class="spacer10"></div>
                    <div class="row">
                        <div class="col-md-12">
                            <label for="nombre_norma">{{ 'modal.normas.term'|trans({}, 'AppBundle') }}</label>
                            <input type="text" class="form-control" id="nombre_norma" name="nombre_norma" placeholder="{{ 'modal.normas.termPlaceholder'|trans({}, 'AppBundle') }}">
                        </div>
                    </div>
                    <div class="spacer10"></div>
                    <div class="row">
                        <div class="col-md-12">
                            <label for="procedencia_producto">{{ 'modal.normas.comite'|trans({}, 'AppBundle') }}</label>
                            <div class="form-group">
                                <div>
                                    <select name="comite_tecnico" id="comite_tecnico" class="form-control toSelect2">
                                        <option value="" selected="selected">{{ 'seleccioneOpcion'|trans({}, 'AppBundle') }}</option>
                                        {% for key, item in comiteTecnico %}
                                            <option value="{{ key }}">{{ item.nombre }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="spacer5"></div>
                    <div class="row">
                        <div class="col-md-12">
                            <button type="button" class="btn btn-default pull-right" disabled="disabled" id="btnBuscarNorma"><i class="fa fa-binoculars"></i> {{ 'boton.buscar'|trans({}, 'AppBundle') }}</button>
                        </div>
                    </div>
                </form>
                <div class="spacer10"></div>
                <table  class="table table-hover table-condensed" id="resultadoNorma" style="display: none">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="toggleCheckboxNorma" name="toggleCheckboxNorma" /></th>
                            <th>{{ 'columnas.normas.no'|trans({}, 'AppBundle') }}</th>
                            <th>{{ 'columnas.normas.norma'|trans({}, 'AppBundle') }}</th>
                            <th>{{ 'columnas.normas.anno'|trans({}, 'AppBundle') }}</th>
                            <th>{{ 'columnas.normas.comite'|trans({}, 'AppBundle') }}</th>
                        </tr>
                    </thead>
                    <tbody id="resultadoNormaBody"></tbody>
                </table>
                <div class="alert alert-danger" role="alert" style="display: none;" id="sinResultadosBuscarNormas">
                    {{ 'mensajes.msgNoEncontrado'|trans({}, 'AppBundle') }}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">{{ 'boton.regresar'|trans({}, 'AppBundle') }}</button>
                <button type="submit" class="btn btn-primary" id="btnAplicarNorma" disabled="disabled"><i class="fa fa-save"></i> {{ 'boton.aplicar'|trans({}, 'AppBundle') }}</button>
            </div>
        </div>
    </div>
</div>

And that's the code I trigger when I click on #btnBuscarNorma:

$('button#btnBuscarNorma').on('click', function (ev) {
    ev.preventDefault();
    $.post(Routing.generate('filtrarNormas'), $('#buscadorNorma').serialize(), 'json')
        .done(function (data, textStatus, jqXHR) {
            $('#resultadoNorma').toggle(!!data.entities.length);
            $("#sinResultadosBuscarNormas").toggle(!data.entities.length);

            if (data.entities.length > 0) {
                var $html = '';
                data.entities.forEach(function (value, index, array) {
                    $html += '<tr>';
                    $html += '<td><input type="checkbox" id="' + value.id + '" value="' + value.id + '"></td>';
                    $html += '<td>' + value.codigo + '</td>';
                    $html += '<td>' + value.norma + '</td>';
                    $html += '<td>' + value.anno + '</td>';
                    $html += '<td>' + value.comiteTecnico + '</td>';
                    $html += '</tr>';
                });

                $("table tbody#resultadoNormaBody").html($html);
                marcarTodosCheck('#toggleCheckboxNorma', '#resultadoNormaBody');
            }
        });
});

The idea is Enter key will trigger #btnBuscarNorma click event and not #btnAplicarNorma click event.

For reference http://stackoverflow.com/questions/24958558/bootstrap-3-modal-is-closed-when-enter-is-pressed-but-form-is-not-submitted http://stackoverflow.com/questions/19297520/submit-form-data-both-on-clicking-enter-and-hitting-the-submit-button-from-a-boo — Swapnil Motewar, Nov 26 '14 at 14:12
Possible duplicate of [detect key press on modal dialog not working](https://stackoverflow.com/questions/34351044/detect-key-press-on-modal-dialog-not-working) — Vic Seedoubleyew, Jul 18 '19 at 14:22

score 6 · Accepted Answer · answered Nov 26 '14 at 14:09

6

Bind this event when you open a modal.

//to prevent multiple binding
$(document).unbind("keyup").keyup(function(e){ 
    var code = e.which; // recommended to use e.which, it's normalized across browsers
    if(code==13)
    {
        $("#btn").click();
    }
});

answered Nov 26 '14 at 14:09

Mathieu Labrie Parent

2,598
1
9
10

Can you provide a example with a modal? Or you mean on `show.bs.modal` or `shown.bs.modal` events for the modal itself? If is the latest I don't know how to fit your solution on it, provide a example if you could – ReynierPM Nov 26 '14 at 14:38
If you wish to submit the form with 'Enter' in the modal then yes, use the code provided in the modal show event. – Mathieu Labrie Parent Nov 26 '14 at 14:41
Please take a look at the edited post, I added some extra info, maybe I not explain in first what I'm trying to do! And I though your solution is not what I'm looking for but it helps a bit – ReynierPM Nov 26 '14 at 14:46

score 0 · Answer 2 · answered Nov 26 '14 at 14:09

You can listen for a form submit and prevent it.

$('#myform').on('submit', function (e) {
  e.preventDefault();
});

This way you can make sure the form is never submitted. You can also start the Ajax call when the submit function is called.

A normal button <button> also doesn't submit the form.

score 0 · Answer 3 · answered Mar 31 '17 at 17:01

0

When modal is opened in class is active on it. So you can get in JQuery:

$("#addNorma.in").on("keydown",function(e){
    if(e.which == 13){
        //Do something.
    }
});

answered Mar 31 '17 at 17:01

Máxima Alekz

572
10
23

Trigger onClick event when Enter keypress in a Twitter Bootstrap Modal

3 Answers3