javascript - evitar - recargar pagina despues de enviar formulario

Evitar la redirección de formulario O actualizar en enviar?

Question

He buscado en varias páginas, pero no puedo encontrar mi problema, así que tuve que hacer una publicación.

Tengo un formulario que tiene un botón de enviar y, cuando lo envíe, NO lo quiero actualizar O redireccionar. Solo quiero que jQuery realice una función.

Aquí está el formulario:

<form id="contactForm">
    <fieldset>
        <label for="Name">Name</label>
        <input id="contactName" type="text" />
    </fieldset>

    <fieldset>
        <label for="Email">Email</label>
        <input id="contactEmail" type="text" />
    </fieldset>

    <fieldset class="noHeight">
        <textarea id="contactMessage" cols="20"></textarea>
        <input id="contactSend" class="submit" type="submit" onclick="sendContactForm()" />
    </fieldset>
</form>        
<small id="messageSent">Your message has been sent.</small>

Y aquí está el jQuery:

function sendContactForm(){
    $("#messageSent").slideDown("slow");
    setTimeout(''$("#messageSent").slideUp();$("#contactForm").slideUp("slow")'', 2000);
}

Lo he intentado con y sin un elemento de acción en el formulario, pero no sé lo que estoy haciendo mal. Lo que me ha molestado más es que tengo un ejemplo que lo hace perfectamente: página de ejemplo

Si quieres ver mi problema en vivo, ve a stormink.net (mi sitio) y mira la barra lateral donde dice "Envíame y envíame un correo electrónico" y "Subscripción RSS". Ambas son formas en las que intento que esto funcione.

Answer 1

Aquí:

function submitClick(e)
{
     e.preventDefault();
     $("#messageSent").slideDown("slow");
     setTimeout(''$("#messageSent").slideUp();
     $("#contactForm").slideUp("slow")'', 2000);
}

$(document).ready(function() {
    $(''#contactSend'').click(submitClick);
});

En lugar de usar el evento onClick, usará un manejador de eventos ''click'' usando jQuery para enviar al botón (o al botón que corresponda), lo que llevará a submitClick como una devolución de llamada. Pasamos el evento a la devolución de llamada para llamar a preventDefault , que es lo que impedirá que el clic envíe el formulario.

Answer 2

En la etiqueta de apertura de su formulario, establezca un atributo de acción de esta manera:

<form id="contactForm" action="#">

Answer 3

Parece que te falta un return false .

Answer 4

Simplemente maneje el envío del formulario en el evento de submit y devuelva falso:

$(''#contactForm'').submit(function () {
 sendContactForm();
 return false;
});

No necesita más el evento onclick en el botón de enviar:

<input class="submit" type="submit" value="Send" />

Answer 5

Una solución alternativa sería no utilizar la etiqueta de formulario y manejar el evento de clic en el botón Enviar a través de jquery. De esta forma no habrá ninguna actualización de página, pero al mismo tiempo hay una desventaja: el botón "enter" para la sumisión no funciona y tampoco en los móviles no obtendrás un botón de "ir" (un estilo en algunos móviles). Así que adhiérase al uso de la etiqueta de formulario y use la respuesta aceptada.

Answer 6

Si desea ver los errores predeterminados del navegador que se muestran , por ejemplo, aquellos activados por atributos HTML (que aparecen antes de cualquier tratamiento JS de código de cliente):

<input name="o" required="required" aria-required="true" type="text">

Debe usar el evento submit lugar del evento click . En este caso, aparecerá una ventana emergente solicitando " Por favor, rellene este campo ". Incluso con preventDefault :

$(''form'').on(''submit'', function(event) {
   event.preventDefault();
   my_form_treatment(this, event);
}); // -> this will show up a "Please fill out this field" pop-up before my_form_treatment

Como mencionó anteriormente , return false detendría la propagación (es decir, si hay más manejadores adjuntos al envío del formulario, no se ejecutarían), pero, en este caso, la acción desencadenada por el navegador siempre se ejecutará primero. Incluso con un return false al final.

Por lo tanto, si desea deshacerse de estas ventanas emergentes predeterminadas , use el evento click en el botón Enviar:

$(''form input[type=submit]'').on(''click'', function(event) {
   event.preventDefault();
   my_form_treatment(this, event);
}); // -> this will NOT show any popups related to HTML attributes