1

Tengo dos botones dentro de un formulario. Estos botones deben abrir una ventana modal para poder cargar clientes o ingredientes en una base de datos. Antes de los dos botones hay un input para nombrar un menu (el formulario es para crear un nuevo menu) y un select para elegir un cliente.

Este es el código de mis botones:

 <span class="input-group-prepend d-none d-sm-block">
       <button class="btn btn-warning btn-xs ml-1 rounded" data-toggle="modal" 
        data-target="#modalAgregarCliente">Crear Cliente</button>
        <button class="btn btn-danger btn-xs ml-1 rounded" data-toggle="modal"
        data-target="#modalAgregarIngrediente">Crear Ingrediente</button>
 </span>

El problema es el siguiente: Si yo no completo nada en el input o en el select, y doy click en alguno de los botones, sale la alerta diciendo que el input o el select (depende cual deje vacio) son un campo requerido (ya que tienen el atributo required true) y se muestra el modal (cualquiera de los dos) y todo funciona "correctamente".

Pero si en cambio, yo completo el input y escojo una opcion del select, no se abre el modal, directamente se envia el formulario, cosa que todavia no quiero.

Habra alguna propiedad para darle a los botones Crear cliente y Crear ingrediente, de manera tal que no envie el formulario?

Al final del form, antes de la etiqueta de cierre, tengo un boton submit, yo quiero que este sea el unico boton que envie el formulario.

<div class="card-footer">
   <button type="submit" class="btn btn-info btn-lg float-right botonGuardar">Guardar Menú</button>
</div>
1
  • Ya lo solucione, agregando la propiedad type=button en cada uno de los botones que abren modales. Si quieren ponganlo en la respuesta asi lo cierro.
    – Agustin G.
    el 14 mar. 2020 a las 21:45

1 respuesta 1

4

El autor de la pregunta encontró por si mismo la solución. La respuesta estaba en agregar 'type=button' a los botones que abren los 'modals':

   <span class="input-group-prepend d-none d-sm-block">
         <button type="button" class="btn btn-warning btn-xs ml-1 rounded" data-toggle="modal" data-target="#modalAgregarCliente">Crear Cliente</button>
          <button type="button" class="btn btn-danger btn-xs ml-1 rounded" data-toggle="modal" data-target="#modalAgregarIngrediente">Crear Ingrediente</button>
   </span>

Esto se debe a que los atributos 'submit' y 'button' se comportan del siguiente modo:

Submit: el botón envía los datos del formulario al servidor.

Button: el botón no tiene un comportamiento predeterminado, lo que hace que se prevenga por tanto un comportamiento por defecto.

Está respuesta se da a petición del autor de la pregunta para poder cerrarla.

2
  • Pero... ¿en qué radica la diferencia de usar o no button?
    – BetaM
    el 14 mar. 2020 a las 22:49
  • He corregido la respuesta con una breve explicación, es verdad que necesitaba aclaración. Contesté por la petición del autor y no aclaré el porqué. Gracias
    – JorgeGuz
    el 14 mar. 2020 a las 22:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.