formulario sin acción y donde enter no recarga la página


94

Estoy buscando la forma más ordenada de crear un formulario HTML que no tenga un botón de envío. Eso en sí mismo es bastante fácil, pero también necesito evitar que el formulario se recargue cuando se hacen cosas similares a un envío (por ejemplo, presionar Enteren un campo de texto).


¿Quieres que nunca se envíe?
UpTheCreek

Si solo tiene un <form> con un solo <input> que es un campo de texto, no debería enviarlo cuando presione enter, ¿verdad?
Zack The Human

Quiero que se envíe con alguna otra condición (de hecho, presionando un botón determinado). El problema es que no he podido hacer que el comportamiento de 'ingresar mientras está en el campo de texto' de publicar / llegar a la misma URL no suceda. Entonces, mi formulario cuidadosamente creado, donde debe hacer X, Y y Z para enviarlo, puede ser enviado por error por el usuario que presiona Enter.
Matt Roberts

Respuestas:


44

Agregue un controlador onsubmit al formulario (ya sea a través de js simple o jquery $ (). Submit (fn)) y devuelva falso a menos que se cumplan sus condiciones específicas.

A menos que no desee que el formulario se envíe nunca, en cuyo caso, ¿por qué no omitir el atributo 'acción' en el elemento del formulario?


150
Un formulario sin un actionatributo no es un formulario, de acuerdo con los estándares, y de hecho provocará una recarga de página en algunos navegadores. He descubierto que action="javascript:void(0);"funciona bien.
Dutchie432

La respuesta de los holandeses funciona perfectamente. Firefox solo estaba actualizando la página.
IAmGroot

1
@ Dutchie432 debería convertir esto en una respuesta en lugar de un comentario. Luego llegaría a la cima a la que pertenece. Alternativamente, KPrime podría ajustar su respuesta, ya que la omisión de la acción no funcionó para mí ...
salvia

210

Querrá incluirlo action="javascript:void(0);"en su formulario para evitar recargas de página y mantener el estándar HTML.


4
Acabo de pasar 2 días tratando de suprimir la acción predeterminada del botón de envío cuando se presiona Enter, porque aunque la acción tuvo lugar, la página terminó recargándose (Firefox). Agregar el vacío de JavaScript como acción en el formulario lo solucionó. Gracias por eso.
Tony Payne

gracias por esta respuesta adicional. esto todavía funciona, pero ¿sigue siendo la solución de "vanguardia" en 2016?
low_rents

1
@low_rents Todavía lo uso todo el tiempo y personalmente no he encontrado una mejor solución.
Dutchie432

1
Gracias por la solución precisa y excelente para resolver la recarga de la página mientras presiona la tecla Intro :) La mejor solución.
Imran Rafiq Rather

9

Simplemente agregue este evento a su campo de texto. Evitará un envío al presionar Enter, y puede agregar un botón de envío o llamar a form.submit () según sea necesario:

onKeyPress="if (event.which == 13) return false;"

Por ejemplo:

<input id="txt" type="text" onKeyPress="if (event.which == 13) return false;"></input>

1
Gracias por eso. Me temo que la claridad de su respuesta me dejó en claro la exactitud de una respuesta anterior, por lo que no obtiene la respuesta aceptada, ¡pero sí recibe mi gratitud y un voto positivo!
Matt Roberts

2
Gracias. Encantado de ayudar. De todos modos, nunca fui uno de los protagonistas. ;)
GenericMeatUnit

5

Cuando presiona enter en un formulario, el comportamiento natural del formulario es ser enviado, para detener este comportamiento que no es natural, debe evitar que se envíe (comportamiento predeterminado), con jquery:

$("#yourFormId").on("submit",function(event){event.preventDefault()})

4

una idea:

<form method="POST" action="javascript:void(0);" onSubmit="CheckPassword()">
    <input id="pwset" type="text" size="20" name='pwuser'><br><br>
    <button type="button" onclick="CheckPassword()">Next</button>
</form>

y

<script type="text/javascript">
    $("#pwset").focus();
    function CheckPassword()
    {
        inputtxt = $("#pwset").val();
        //and now your code
        $("#div1").load("next.php #div2");
        return false;
    }
</script>

1

Dos formas de resolver:

  1. el valor de la acción del formulario es "javascript: void (0);".
  2. agregue un detector de eventos de pulsación de tecla para el formulario para evitar que se envíe.

Escuchar un evento de pulsación de tecla (por ejemplo, tecla enter) puede traerle problemas con textarealos mensajes de correo electrónico, y posiblemente seleccionar el autocompletado o los menús desplegables, y el móvil podría ser otra fuente de problemas.
luckydonald

0

La primera respuesta es la mejor solución:

Agregue un controlador onsubmit al formulario (ya sea a través de js simple o jquery $ (). Submit (fn)) y devuelva falso a menos que se cumplan sus condiciones específicas.

Más específico con jquery:

$('#your-form-id').submit(function(){return false;});

A menos que no desee que el formulario se envíe nunca, en cuyo caso, ¿por qué no omitir el atributo 'acción' en el elemento del formulario?

Escribir extensiones de Chrome es un ejemplo de dónde puede tener un formulario para la entrada del usuario, pero no desea que se envíe. Si usa action = "javascript: void (0);", el código probablemente funcionará, pero terminará con este problema donde obtendrá un error sobre la ejecución de Javascript en línea.

Si omite la acción por completo, el formulario se volverá a cargar, lo que tampoco es deseado en algunos casos al escribir una extensión de Chrome. O si tuvieras una página web con algún tipo de calculadora incrustada, donde el usuario proporcionaría alguna entrada y haría clic en "Calcular" o algo así.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.