2

Hola soy nuevo en esto espero me puedan ayudar.

Tengo un formulario, pero al darle enviar se actualiza, ocupo que no se actualice, pero además tengo un modal que cuando le doy en el botón consulta se despliega bien, ¿hay manera de unir estos dos botones y que la pagina no se actualice?

<form onsubmit="return=enviarMensaje()" name="formulario" method="post" action="">
<input type="submit" />
<button type="button" id="consulta" onclick="lanza_modal();">Consulta</button>

JS

     function enviarMensaje() {
    e.preventDefault();
    return (false);     

    }
     function lanza_modal() {
    document.getElementById('openModal').style.display = 'block';

1 respuesta 1

0

El problema es que no estás pasando el evento en parámetro desde la función in-line. Poniéndola así debería resolverse: onsubmit="enviarMensaje(event);", en consecuencia, debes declarar también tu función JS de este modo: function enviarMensaje(e) {

function enviarMensaje(e) {
  e.preventDefault();
  console.log("Hola, no me estoy recargando");

}

function lanza_modal() {
    //document.getElementById('openModal').style.display = 'block';
}
<form onsubmit="enviarMensaje(event);" name="formulario" method="post" action="">
  <input type="submit" />
  <button type="button" id="consulta" onclick="lanza_modal();">Consulta</button>
</form>

Sea como sea, estás incurriendo en una mala práctica, pues las funciones in-line no son recomendadas. Puedes sustituirlas por escucha de eventos.

En el código siguiente, identificaremos el formulario y el botón separadamente por su id y asignaremos escucha de evento submit al formulario y escucha de evento click al botón y dentro de cada bloque podremos desarrollar el código que necesitemos o llamar a otra función ya definida si fuera preciso.

const myForm = document.querySelector('#myForm');

const btnConsulta = document.querySelector('#consulta');

myForm.addEventListener('submit', event => {
  event.preventDefault();
  console.log('Envío del formulario');
});

btnConsulta.addEventListener('click', event => {
  event.preventDefault();
  console.log('Click del botón consulta. Lanza aquí el modal, si es que hace falta...');
});
<form id="myForm" name="formulario" method="post" action="">
  <input type="submit" />
  <button type="button" id="consulta">Consulta</button>
</form>

Tu Respuesta

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

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