enviar un formulario a través de Ajax usando un prototipo y actualizar un resultado div

Question

Me pregunto cómo puedo enviar un formulario a través de Ajax (usando prototipo de marco) y mostrar la respuesta del servidor en un div "resultado". El HTML es el siguiente:

<form id="myForm" action="/getResults"> 
    [...] 
    <input type="submit" value="submit" /> 
</form> 
<div id="result"></div> 

Traté de adjuntar una función de JavaScript (que utiliza Ajax.Updater) a la forma "onsubmit" (en el formulario) y "onclick" (en la entrada), pero es aún "no Ajax" enviado después de que la función finaliza (por lo que toda la página se reemplaza por los resultados).

Answer 1

Echa un vistazo a las páginas de Prototype API en Form.Request y Event manejo.

Básicamente, si usted tiene esto:

<form id='myForm'> 
.... fields .... 
<input type='submit' value='Go'> 
</form> 
<div id='result'></div> 

Sus js serían, más o menos:

Event.observe('myForm', 'submit', function(event) { 
    $('myForm').request({ 
     onFailure: function() { .... }, 
     onSuccess: function(t) { 
      $('result').update(t.responseText); 
     } 
    }); 
    Event.stop(event); // stop the form from submitting 
}); 

Answer 2

Debe devolver el valor falso de la función ajax, que bloquea el envío de formulario estándar.

<form id="myForm" onsubmit="return myfunc()" action="/getResults"> 


function myfunc(){ 
    ... do prototype ajax stuff... 
    return false; 

}

Usando onsubmit en el formulario también capta usuarios que envían con la tecla enter.

Answer 3

Primero necesita serialize your form, luego llame a Ajax Updater, usando POST options y páselo por los datos del formulario serializado. El resultado aparecerá en el elemento que se separó.

Answer 4

Es necesario detener la acción predeterminada del evento onsubmit.

Por ejemplo:

function submit_handler(e){ 
    Event.stop(e) 
} 

Más información sobre stopping default event behavior in Prototype »