2012-02-07 24 views
7

Estoy tratando de usar Javascript para enviar los datos del formulario. Aquí está el html.onsubmit refresh html form

<form onsubmit="post();"> 
//input fields here 
</form> 

Aquí está el Javascript para la función post().

var post = function() { 
alert('the form was submitted'); 
return false; 
} 

Mi problema es que el código JavaScript se ejecuta pero la forma sigue procesando y refresca la página ..

puse el código return false; en la esperanza de que se detendría la forma de refrescante.

Respuesta

12

Usted tendrá que poner el retorno falsa parte posterior después de la función() en el controlador onsubmit, así:

<form onsubmit="post();return false;"> 
//input fields here 
</form> 
+0

Yo probé eso y no funcionó! ¡Pero está funcionando ahora, gracias de todos modos! – Frank

+0

Es extraño que no funcionó antes. Podría ser algún error de sintaxis la primera vez. Me alegro de que esté funcionando ahora, sin embargo, ¡feliz de ayudar! –

+0

'

' es aún mejor, mira mi respuesta. – gdoron

2

Es necesario volver realidad falsa de su línea dom-0 manejador. Así que cambia

onsubmit = "post();"> 

a

onsubmit = "return post();"> 

O usted podría dar a su forma un id y hacer esto:

<form id="form1" onsubmit = "post();"> 

Entonces desde un lugar seguro en el que el DOM esté listo :

document.getElementById("form1").onsubmit = post; 
2

Desde que ha añadido la etiqueta jQuery, este Es la mejor manera de hacer esto:
evento discreto adjuntar

$('form').submit(function(){ 
     alert('the form was submitted'); 
     return false; 
    }); 

En su de manera que debe ser;

<form onsubmit="return post();"> 
6

Mantenga su js fuera del DOM.

<form id="myform" action="somepage.php" method="post"> 
//input fields 
</form> 

JQuery:

$('#myform').submit(function(event){ 
    alert('submitted'); 
    event.preventDefault(); 
}); 
1

Desde este puesto se etiqueta con jQuery, voy a ofrecer la siguiente solución:

$('form').submit(function(e){ 
    //prevent the form from actually submitting. 
    e.preventDefault(); 
    //specify the url you want to post to. 
    //optionally, you could grab the url using $(this).attr('href'); 
    var url = "http://mysite.com/sendPostVarsHere"; 
    //construct an object to send to the server 
    //optionally, you could grab the input values of the form using $(this).serializeArray() 
    var postvars = {}; 
    //call jquery post with callback function 
    $.post(url, postvars, function(response){ 
    //do something with the response 
    console.log(response); 
    }, 'json') 
}); 
+0

Si elige usar serializeArray(), asígnelo a una variable y ejecute [Pointy's Array -> Object function here] (http://stackoverflow.com/questions/7867441/form-keyvalue-pairs-jquery-plugin#answer -7867459) antes de enviarlo al servidor. –