Tengo el siguiente Twitter Bootstrap 3 modal, con un formulario dentro de la modal:

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title">Add new page</h2>
</div>
<div class="modal-body">
<form class="form-horizontal add-new-page-form">
<fieldset>
<!-- Label -->
<div class="form-group">
<label class="col-md-4 control-label" for="labelInput">Label</label>
<div class="col-md-5">
<input id="labelInput" name="labelInput" type="text" data-field="label" class="form-control input-md">
<span class="help-block">Page label</span>
</div>
</div>
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-4 control-label" for="closeBtn"></label>
<div class="col-md-8">
<button id="closeBtn" name="closeBtn" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" id="saveBtn" name="saveBtn" class="btn btn-primary add-page" value="Add">
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>

Quiero coger el submit evento a través de jQuery:

$("form").on("submit", function () {
alert("foo");
return false;
});

El formulario no se envía a través de pulsar la tecla Entrar clave (cuando una entrada de texto se centra), pero se presenta cuando Agregar botón (que es un submit uno) se hace clic.

No puedo averiguar por qué el formulario no se envía a través de Entrar. El modal simplemente se cierra, pero submit evento no se emite despedido.

JSFDDLE – donde se puede reproducir el problema

Probado en Cromo Versión 34.0.1847.116 Ubuntu 14.04 aura (260972) y Firefox 31.0. Mismo problema en ambos navegadores.

4 Comentarios

  1. 19

    usted puede simplemente cambiar el orden de

    close-button
    submit-button

    a

    submit-button
    close-button

    o agregar

     type="button"

    a su botón cerrar para que no se interpreta como botón de enviar

    saludos

    • He cambiado el orden de los botones y funciona. Pero whyyyy?! Quiero usar navegador integrado presentar configuración, de manera que el resto de los scripts son inútiles.
    • bien parece ser que existen algunas bootstrap.js que altera el comportamiento por defecto stackoverflow.com/questions/10400149/…
    • Vi a esa pregunta, pero no explica este problema. 🙂
    • bueno, la respuesta correcta sería añadir type=»button» a su botón cerrar, entonces usted no tiene que cambiar el orden
    • Añadir esta información a su respuesta y un JSFIDDLE así. Esa es la mejor. En la pregunta anterior, que se ajuste type="button" para la x icono. Muchas gracias.
    • este ha sido atormentándome durante meses, pero siempre me ha presentado el problema. GRACIAS por la type="button" solución!
    • añadir type=»button» para el botón cerrar se trabajó para mí +1

  2. 3

    He añadido un controlador para el modal evento de cierre para enviar el formulario antes de cerrar la modal, así:

    $("#myModal").on("hide.bs.modal", function () {
    $(this).find('form').submit(); 
    });

    He actualizado el jsfiddle, en consecuencia, http://jsfiddle.net/yAzrs/2/

    Usted puede escuchar también para la tecla enter en el propio formulario, algo como esto:

    $('form').on("keypress", function (e) {
    if (e.which == 13) $(this).submit();
    });
  3. 2

    has intentado usar

    $(document).keypress(function(e) {
    if(e.which == 13) {
    alert('You pressed enter!');
    }
    });

    jQuery no sabe que usted ha pulsado entrar simplemente por que pulsar la tecla enter. Incluir jQuery anterior, pero con su propio código dentro de la instrucción if y esperemos que se debe trabajar

    • Sé que, pero quiero coger submit evento.
  4. 0

    Presionando entrar en el campo de entrada causado botón con datos descartar=»modal» a ser despedido
    sólo el cambio de datos-descartar=»modal» a tu botón de enviar y eliminar de su botón cerrar

    <input type="submit" id="saveBtn" name="saveBtn" class="btn btn-primary add-page" data-dismiss="modal" value="Add">

Dejar respuesta

Please enter your comment!
Please enter your name here