Un modal, un formulario, un botón


Trabajando con los modals de bootstrap para mostrarle al usuario algún formulario, me he percatado que el botón Enviar aparece siempre en el HTML que se encuentra fuera del formulario en sí.

Un modal bootstrap está formado por:

  • Encabezado (modal-header)
  • Cuerpo (modal-body)
  • Footer (modal-footer)

image

La parte problemática aquí es que el contenido del formulario va en el Cuerpo del modal, mientras los botones de Cerrar (el modal) y Enviar (el formulario) van en el Footer para lograr la consistencia con el diseño que propone el framework.

El desafío que existe aquí es el siguiente:

¿Cómo lograr que se envíe el formulario al presionar el botón Enviar, sin tener que utilizar JavaScript y manteniendo el botón fuera del formulario?

Solución

Parece difícil, pero en realidad es muy simple si conoces el atributo form.

Este atributo no debe ser confundido con la etiqueta form, pues como bien te comento, es una propiedad que se le asigna a los controles. Esto permite que puedas asignar cualquier control a un formulario que se encuentre fuera del propio formulario dentro de la página.

Lo único que debes hacer son dos cosas:

  1. Asignarle un id al formulario.
  2. Asignarle al atributo form del control externo el valor de dicho id.

El código del Modal que te muestro en la página debería quedar así (solo se muestra el Cuerpo y el Footer):

<div class="modal-body">

          <form id="SUPER_FORM">
            <div class="form-group">
                <label for="nombre"> Su nombre </label>
                <input name="nombre" class="form-control">      
            </div>  

            <div class="form-group">
                <label for="edad"> Su edad </label>
                <input name="edad" class="form-control" type="integer">     
            </div>
          </form>

    </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        <button type="submit" form="SUPER_FORM" class="btn btn-primary">Enviar</button>
</div>

Observa cómo el último botón del Footer es de tipo submit, y cómo el atributo form tiene el mismo id del formulario.

Conclusiones

Este atributo forma parte de la especificación HTLM5 y es soportado en la mayoría de los navegadores modernos. Sin más te dejo el demo para que juegues con él y no dudes dejar tus impresiones al respecto.

PD: Para que funcione el demo mantén tu navegador con conexión a Internet pues se utilizan jQuery y Bootstrap desde sus respectivos CDNs.