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>
type=button
en cada uno de los botones que abren modales. Si quieren ponganlo en la respuesta asi lo cierro.