How to avoid ENTER key behavior in Twitter Bootstrap Modal component

Question

I have this HTML for a Twitter Bootstrap Modal:

<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="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>
                <table  class="table table-hover table-condensed" id="resultadoNorma" style="display: none">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="toggleCheckboxNormaModal" name="toggleCheckboxNormaModal" /></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>
            <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><i class="fa fa-save"></i> {{ 'boton.aplicar'|trans({}, 'AppBundle') }}</button>
            </div>
        </div>
    </div>
</div>

This is the code that handle the #btnBuscarNorma:

$('#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);
        }
    });
});

And this one is for handle the #btnAplicarNorma button:

$('#btnAplicarNorma').on('click', function (ev) {
    var $tr_to_append = $('#resultadoNormaBody').find('tr.copyMe'),
        has_tr = $("#normaBody").find('tr');

    $('#tablaNorma').removeClass('hidden');
    $('#alertSinNorma').addClass('hidden');
    $('#toggleCheckboxNormaModal').prop('checked', false);

    if ($tr_to_append.length) {
        $tr_to_append.find('input[type=checkbox]').prop('checked', false);
        $tr_to_append.removeClass('copyMe');
        $(this).prop('disabled', true);

        var clonedRows = $("#normaBody").find("tr");
        $.each($tr_to_append, function (i, v) {
            var added = false;
            var currentRowHtml = $(v).html();
            $.each(clonedRows, function (i, cRow) {
                var clonedRowHtml = $(cRow).html();
                if (currentRowHtml == clonedRowHtml) {
                    added = true;
                }
            });

            if (!added) {
                $(v).clone().appendTo('#normaBody').removeClass('copyMe');
            }
        });
    }

    $("#btnGuardarPasoTresAgregarProducto").prop('disabled', false);
    $('#addNorma').modal('hide');

    if ($('#toggleCheckboxNormaModal').is(":checked")) {
        $('#toggleCheckboxNormaModal').prop("checked", false);
    }
});

The issue I'm having is that any time I press the enter key the modal is closed and I get redirect to some URL, why? why I'm running this issue? Any workaround to avoid that behavior?

Answer 1

You can suppress the submit event on the form that seems to be submitting using:

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

Answer 2

set the backdrop value of modal to static.

<div class="modal fade " id="addNorma" tabindex="-1" data-backdrop="static" data-keyboard="false" role="dialog" aria-labelledby="addNorma" aria-hidden="true">

I hope this will help....