Código JavaScript para detener el envío del formulario

206

Una forma de detener el envío del formulario es devolver falso desde su función de JavaScript.

Cuando se hace clic en el botón Enviar, se llama a una función de validación. Tengo un caso de validación de formulario. Si se cumple esa condición, invoco una función llamada returnToPreviousPage ();

function returnToPreviousPage() {
    window.history.back();
}

Estoy usando JavaScript y Dojo Toolkit .

En lugar de volver a la página anterior, envía el formulario. ¿Cómo puedo cancelar este envío y volver a la página anterior?

javascript  html  forms 
— Muhammad Imran Tariq
fuente
RU ¿Seguro que esta función está llamando? intenta poner alerta ('prueba'); before window.history
— samirprogrammer
Sí, estoy seguro; se llama
— Muhammad Imran Tariq
8
— TJ

Respuestas:

292

Puede usar el valor de retorno de la función para evitar el envío del formulario

<form name="myForm" onsubmit="return validateMyForm();">

y funcionan como

<script type="text/javascript">
function validateMyForm()
{
  if(check if your conditions are not satisfying)
  { 
    alert("validation failed false");
    returnToPreviousPage();
    return false;
  }

  alert("validations passed");
  return true;
}
</script>

En el caso de Chrome 27.0.1453.116 m si el código anterior no funciona, establezca el campo returnValue del parámetro del controlador de eventos en falso para que funcione.

Gracias Sam por compartir información.

EDITAR:

Gracias a Vikram por su solución para if validateMyForm () devuelve false:

 <form onsubmit="event.preventDefault(); validateMyForm();">

donde validateMyForm () es una función que devuelve falso si falla la validación. El punto clave es usar el evento de nombre. No podemos usar para egepreventDefault ()

— Hemant Metalia
fuente
1
Solo una suposición: no funciona para mí en la última versión de Chrome.
— Sam
55
Cualquier cosa que regrese falseno parece tener ningún efecto; Chrome aún envía el formulario. Por ejemplo, onsubmit="return false;". Sin embargo, establecer el returnValuecampo del parámetro del controlador de eventos en falsesí funciona para mí.
— Sam
3
Hola Sam / Hemant, ¿puede proporcionar una muestra de código sobre cómo establecer el campo returnValue del parámetro del controlador de eventos en falso por favor?
— JackDev
2
Creo que como esta es la respuesta aceptada, probablemente debería decir cómo hacerlo correctamente. Yo junto con JackDev, me pregunto cómo hacer que esto funcione correctamente. Como es, esto no funciona
— Cruncher
1
Si validateMyForm()tiene errores return falseno se alcanzará. Entonces esto puede fallar. Después de muchas horas, encontré una solución que funciona y la publiqué a continuación.
— Vikram Pudi
116

Usar prevenir defecto

Dojo Toolkit

dojo.connect(form, "onsubmit", function(evt) {
    evt.preventDefault();
    window.history.back();
});

jQuery

$('#form').submit(function (evt) {
    evt.preventDefault();
    window.history.back();
});

JavaScript vainilla

if (element.addEventListener) {
    element.addEventListener("submit", function(evt) {
        evt.preventDefault();
        window.history.back();
    }, true);
}
else {
    element.attachEvent('onsubmit', function(evt){
        evt.preventDefault();
        window.history.back();
    });
}
— Greg Guida
fuente
3
Recomendaría event.preventDefault () sobre return false por muchas razones, esta debería ser la respuesta principal: blog.nmsdvid.com/…
— acidjazz
1
Buena respuesta. Mejor que el elegido.
— Ani Menon
2
Bien, pero ¿dónde realizarías la validación que quiere el OP?
— Sahand
1
@acidjazz Pero, ¿cómo se accede a los datos del formulario después de evitar el valor predeterminado?
— CodeAt30
@Sahand @ codeat30 Puede acceder al evento target.
— Adrien
50

Lo siguiente funciona a partir de ahora (probado en Chrome y Firefox):

<form onsubmit="event.preventDefault(); validateMyForm();">

Donde validateMyForm () es una función que devuelve falsesi falla la validación. El punto clave es usar el nombre event. No podemos usar por ej e.preventDefault().

— Vikram Pudi
fuente
15

Simplemente use un buttonbotón simple en lugar de enviar. Y llame a una función de JavaScript para manejar el envío del formulario:

<input type="button" name="submit" value="submit" onclick="submit_form();"/>

Función dentro de una scriptetiqueta:

function submit_form() {
    if (conditions) {
        document.forms['myform'].submit();
    }
    else {
        returnToPreviousPage();
    }
}

También puedes probar window.history.forward(-1);

— dku.rajkumar
fuente
Me gusta este enfoque porque permite mi caso de uso, devoluciones de llamada.
— Eddie
12
Esto evita el uso de la tecla Intro para enviar el formulario. Además, los nuevos atributos HTML5, como requiredno funcionarán.
— Sam
8

Muchas formas difíciles de hacer algo fácil:

<form name="foo" onsubmit="return false">
— Danial
fuente
3
Esta respuesta exacta (OK, no exacta, ya que a la suya le falta un punto y coma) se envió 8 meses antes y tiene votos negativos por una buena razón. Esto funciona la mayor parte del tiempo. Pero no en todos los navegadores todo el tiempo.
— Auspex
3
No dije que necesitaras un punto y coma; Señalé que eso era todo lo que era diferente entre su respuesta y una respuesta mucho más antigua. El hecho de que ahora me pidas que le indique qué navegadores no lo admiten (nunca dije que hubiera ninguno, simplemente señalé que no siempre funcionaría), prueba que todavía no has leído toda esta página .
— Auspex
2
Usualmente no examino los votos negativos, excepto que no sabía que la gente estaba votando el código correcto. Técnicamente, el punto y coma es extraño, por lo que está mal. Y dijiste "al tuyo le falta el punto y coma", lo que implica que es necesario, lo cual está mal. ¿Dices que "no siempre funcionará" pero no puedes señalar un solo caso o navegador donde no funcionará? Esta es la lógica del sonido? Es el código correcto. Entonces, a menos que pueda señalar el caso en el que no funcionará, entonces no tiene ningún punto.
— Danial
¿Cómo esto no tiene más votos a favor? Es mucho más breve en comparación con los otros ejemplos.
— Sal Alturaigi
Probablemente porque el título no coincide con lo que el chico realmente estaba preguntando.
— Danial
6

Todas sus respuestas dieron algo para trabajar.

Finalmente, esto funcionó para mí: (si no elige al menos un elemento de casilla de verificación, advierte y permanece en la misma página)

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <form name="helloForm" action="HelloWorld" method="GET"  onsubmit="valthisform();">
            <br>
            <br><b> MY LIKES </b>
            <br>
            First Name: <input type="text" name="first_name" required>
            <br />
            Last Name: <input type="text" name="last_name"  required />
            <br>
            <input type="radio" name="modifyValues" value="uppercase" required="required">Convert to uppercase <br>
            <input type="radio" name="modifyValues" value="lowercase" required="required">Convert to lowercase <br>
            <input type="radio" name="modifyValues" value="asis"      required="required" checked="checked">Do not convert <br>
            <br>
            <input type="checkbox" name="c1" value="maths"     /> Maths
            <input type="checkbox" name="c1" value="physics"   /> Physics
            <input type="checkbox" name="c1" value="chemistry" /> Chemistry
            <br>

            <button onclick="submit">Submit</button>

            <!-- input type="submit" value="submit" / -->
            <script>
                <!---
                function valthisform() {
                    var checkboxs=document.getElementsByName("c1");
                    var okay=false;
                    for(var i=0,l=checkboxs.length;i<l;i++) {
                        if(checkboxs[i].checked) {
                            okay=true;
                            break;
                        }
                    }
                    if (!okay) { 
                        alert("Please check a checkbox");
                        event.preventDefault();
                    } else {
                    }
                }
                -->
            </script>
        </form>
    </body>
</html>
— Gdba
fuente
Trabajó para mí también.
— chetan
4

Base en la respuesta de @Vikram Pudi, también podemos hacer esto con Javascript puro

<form onsubmit="submitForm(event)">
    <input type="text">
    <input type="submit">
</form>

<script type="text/javascript">

    function submitForm(event){
        event.preventDefault();


    }
</script>
— Phan Van Linh
fuente
3

Recomendaría no usar onsubmity adjuntar un evento en el script.

var submit = document.getElementById("submitButtonId");
if (submit.addEventListener) {
  submit.addEventListener("click", returnToPreviousPage);
} else {
  submit.attachEvent("onclick", returnToPreviousPage);
}

Luego use preventDefault()(o returnValue = falsepara navegadores antiguos).

function returnToPreviousPage (e) {
  e = e || window.event;
  // validation code

  // if invalid
  if (e.preventDefault) {
    e.preventDefault();
  } else {
    e.returnValue = false;
  }
}
— Isaac Abramowitz
fuente
¿Podría explicar por qué no usaría onsubmit?
— theFreedomBanana
Tal vez sea solo preferencia, pero me resulta más fácil comprender la funcionalidad de una página web si todos los oyentes de eventos están conectados usando en JSlugar de HTMLusar atributos. De esa manera, no necesita saltar tanto mientras lee el código de otra persona
— Isaac Abramowitz el
¿Qué pasa si alguien presiona enter en una de las entradas en lugar de hacer clic en el botón? en general ii todavía se presenta ...
— bluejayke
1

Digamos que tienes un formulario similar a este

<form action="membersDeleteAllData.html" method="post">
    <button type="submit" id="btnLoad" onclick="confirmAction(event);">ERASE ALL DATA</button>
</form>

Aquí está el javascript para la función confirmAction

<script type="text/javascript">
    function confirmAction(e)
    {
        var confirmation = confirm("Are you sure about this ?") ;

        if (!confirmation)
        {
            e.preventDefault() ;
            returnToPreviousPage();
        }

        return confirmation ;
    }
</script>

Este funciona en Firefox, Chrome, Internet Explorer (edge), Safari, etc.

Si ese no es el caso, hágamelo saber

— Mauricio Gracia Gutierrez
fuente
1
La combinación de preventDefault()y returnToPreviousPage()es perfecta y elegante. Interrumpe el funcionamiento normal al igual que diseñaría cualquier receptor de excepciones para que funcione. +1.
— 1934286
1

Las respuestas de Hemant y Vikram no funcionaron para mí directamente en Chrome. El evento.preventDefault (); la secuencia de comandos evitó que la página se enviara independientemente de aprobar o no la validación. En cambio, tuve que mover el evento.preventDefault (); en la declaración if de la siguiente manera:

    if(check if your conditions are not satisfying) 
    { 
    event.preventDefault();
    alert("validation failed false");
    returnToPreviousPage();
    return false;
    }
    alert("validations passed");
    return true;
    }

Gracias a Hemant y Vikram por ponerme en el camino correcto.

— Jesperai
fuente
A mí también me funcionó. Gracias.
— ivbtar
1

Por ejemplo, si tiene el botón Enviar en el formulario, para detener su propagación, simplemente escriba event.preventDefault (); en la función que se llama al hacer clic en el botón Enviar o en el botón Intro.

— Dheeraj Nalawade
fuente
0

Simplemente hazlo ...

<form>
<!-- Your Input Elements -->
</form>

y aquí va tu JQuery

$(document).on('submit', 'form', function(e){
    e.preventDefault();
    //your code goes here
    //100% works
    return;
});
— Matee Gojra
fuente
1
¿Has usado jquery aquí?
— Selva Ganapathi
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.