Vi del ejemplo del W3C algo como esto. Se produce una acción en el envío del formulario (una alerta). Sin embargo, cuando probé con mi propia función aquí, mi acción no sucede (mostrar div oculto) . El objetivo es mostrar div oculto en el envío del formulario utilizando la solicitud 'GET'. Soy nuevo en javascript / jQuery / ajax, pero ¿no se supone que jQuery llama al servidor sin actualizar la página?

No funciona javascript:

$(document).ready(function(){
    $("form").submit(function showDiv(){
        document.getElementById("showMe").style.display = "block";
    });
});

No funciona html:

<body>
    <form action="" method="GET">
    <input type="text" name="LastName" value="Mouse"><br>
    <input type="submit" value="Submit">
    </form> 

    <div id="showMe" style="display: none;">
    <p>hey this should be hidden</p>
    </div>
</body>
1
Kervvv 10 may. 2016 a las 18:05

4 respuestas

La mejor respuesta

Debe cancelar el envío del formulario antes de ejecutar su código:

$(document).ready(function(){
    $("form").submit(function(e){
        // At this point you'll want to have some type of flag to indicate whether you
        // should allow the form submission to continue, or cancel the event. For example,
        // it could be whether not showMe is visible (I don't know what you're going for).

        e.preventDefault();
        $("#showMe").css("display", "block");

        // Submit form after your code runs (or whenever you want)
        $("form").submit();
    });
});
2
James Hill 10 may. 2016 a las 15:26
$(document).ready(function(){
    $("form").submit(function(e){
        e.preventDefault(); // this will prevent the submit
        document.getElementById("showMe").style.display = "block";
    });
});

En realidad, el jfiddle que publicó no está bloqueando el form, le muestra una alerta que bloquea toda la ejecución de js (comportamiento del navegador), si selecciona ok en el alert, el {{X3 }} pasa a través de

La declaración event.preventDefault() significa: no procese nada fuera de esta función

1
Gumma Mocciaro 10 may. 2016 a las 15:10

Necesita al menos un elemento de formulario (botón o entrada), que tenga el tipo "submit". Entonces jQuery .submit () o .on ('submit', ..) definitivamente funcionará.

0
krysits 31 may. 2017 a las 08:31

Prueba esto:

$("form").submit(function(e){
    e.preventDefault();
    $("#showMe").show();
});
0
David Webb 10 may. 2016 a las 15:12