2

Tengo un formulario sencillo con dos inputs y un botón para enviarlo. Estoy intentando que no funcione el submit por defecto para poder hacer cosas con los datos antes de enviarlo al servidor pero, no sé por qué, no consigo evitar el submit.

Supongo que al final será una tontería pero no consigo encontrarla...

Aquí el formulario

<form id="formID">
    <input type="email" id="loginName" placeholder="Usuario" required autofocus>
    <input type="password" id="loginPass" placeholder="Contraseña" required>

    <button type="submit">Enviar</button>
</form>

He probado también con action="/" pero continua igual.

Aquí el jquery

$('#formID').on('submit', function (event) {
            event.preventDefault();
});

Lo he probado también con $("#formID").submit(function(event){}); y return false pero continua igual, al darle al botón o "enter" se recarga la página.

No sé me ocurre más para probar... ¿Alguna idea?

7
  • intenta agregando return false; Commented el 16 abr. 2018 a las 15:15
  • Gracias por tu respuesta pero justo después del código jQuery aclaro que ya he probado con return false
    – Rabegi
    Commented el 16 abr. 2018 a las 15:16
  • Así debería funcionar: $("#formID").submit(function(event){ event.preventDefault(); }); o bien, podrías dar un id al botón propiamente y escuchar el evento click del mismo: <button id="btnEnviar">Enviar</button> y para escuchar: $('#btnEnviar').on('click', function (event) { event.preventDefault(); }); o bien de esta otra forma también: $('#formID').submit(false);
    – A. Cedano
    Commented el 16 abr. 2018 a las 15:18
  • Por lo menos está entrando en el evento? es decir, si le das console.log(event); muestra algo en la consola? también intenta con event.stopPropagation(); Commented el 16 abr. 2018 a las 15:21
  • En la pregunta he especificado que con ese código no me funciona tampoco... Necesito que el código se ejecute tanto si le das al botón como si, al finalizar de rellenar el formulario, le das al botón "enter", por lo que no puedo utilizar solo el evento click, debe ser algo que englobe a ambos, que conozca, solo está el submit...
    – Rabegi
    Commented el 16 abr. 2018 a las 15:21

2 respuestas 2

5

probé con el código que proporcionas en el post y funciona correctamente, tal vez es el cache del navegador, prueba limpiando presionando Crtl + F5

Mira aqui dejo tu mismo codigo, funciona correctamente...

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container-fluid">
	<div class="row">
		<div class="col-lg-12">
			<form id="formID">
			    <input type="email" id="loginName" placeholder="Usuario" required autofocus>
			    <input type="password" id="loginPass" placeholder="Contraseña" required>

			    <button type="submit">Enviar</button>
			</form>
		</div>
	</div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
	<script>
		$(function() {
		  $('#formID').on('submit', function (event) {
   	          	event.preventDefault();
		  });
		});
	</script>
  </body>
</html>

PD: Si se ve mucho código, es por que es la plantilla base de bootstrap 4

2
  • 1
    Vale, por algún motivo el error está en que el script lo tengo en la cabecera de la página y no bajo el código... En teoría no se ejecuta hasta que no carga la página (y, como es obvio, hasta que no envías el formulario) pero ni idea. Poniéndolo como lo tienes tú, abajo del todo, funciona sin problemas. ¡Muchas gracias!
    – Rabegi
    Commented el 16 abr. 2018 a las 15:31
  • De nada, saludos!
    – Rico
    Commented el 16 abr. 2018 a las 15:38
0

En caso de que no hayas publicado la respuesta, deben poner la function del addEventListener después de que se cargue el DOM utiliza siempre:

 $(document).ready(function () {
  document.getElementById("submit").addEventListener("click", actulizahtml);
]);

Con esto, primero cargas el botón en el html y despues dejar el "oyente", si no siempre te dará error.

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.