Form Submit in Ajax – Script per principianti

ajax-logoSolitamente evito turorial e articoli troppo tecnici visto che “saper spiegare” è una cosa più difficile di quanto sembri. Questo volta però ho realizzato uno scriptino che permetterà a chiunque (o quasi) di implementare l’invio di un form in Ajax senza bisogno di particolari abilità.

Premesse
Per chi non lo sapesse, Ajax è una tecnica di sviluppo web che tramite l’oggetto XMLHttpRequest permette l’invio e ricezione di dati senza bisogno di ricaricare la pagina con evidenti benifici in termini di velocità e usabilità del sito.

L’implementazione è più facile di quanto sembri anche per form già esistenti; è inoltre possile gestire anche l’eventualità che il browser abbia i javascript disabilitati redirigendolo in un’apposita pagina.

A differenza di molti script che si trovano in rete,ho cercato di parametrizzare i campi fondamentali così da poter specificare il messaggio di ‘Loading’ e l’ID del DIV in cui visualizzare la risposta del Form.

1. Lo Script
Innanzi tutto avrete bisogno di questo script che dovrete uploadare nel vostro sito e linkare nella sezione head della pagina del form in questo modo:

<script src="js/ajaxsbmt.js" type="text/javascript"></script>

Non dimenticate di modificare il percorso del JS con quello della cartella in cui l’avete uploadato.

2. Il Form
L’unica cosa da aggiungere rispetto ad un form classico, è il richiamo alla funzione xmlhttpPost associata all’evento onsubmit.
Il richiamo alla funzione xmlhttpPost va personalizzata secondo le vostre esigenze:

  1. Il primo paramentro (‘response_ajax.asp’) si riferisce alla pagina che riceverà i dati del form e risponderà
  2. Il secondo parametro (‘MyForm’) si riferisce al nome del form da cui prelevare i dati
  3. Il terzo parametro (‘MyResult’) si riferisce all’ID del DIV che conterrà la risposta del form ed il messaggio di attesa.
  4. Il quarto paramentro (‘Wait…’) si riferisce al messaggio di attesa che apparità durante l’invio dei dati. Potete anche inserire del codice HTML magari per far apparire un’immagine di caricamento.
<form name="MyForm" action="response_normal.asp" method="post" onsubmit="xmlhttpPost('response_ajax.asp', 'MyForm', 'MyResult', 'Wait...'); return false;">
<input type="text" name="sample_text" value="Test" />
<input type="submit" name="send_button" value="Send" />
</form>

La cosa interessante è che nel caso in cui il browser avesse il javascript disabilitati, i dati verranno inviati comunque alla pagina specificata nella proprietà action rendendo questo script di fatto accessibile.

4. Conclusioni
Visto quanto è facile realizzare un form “moderno”? Ho cercato di semplificare la questione il più possibile ma se avete dubbi, domande o problemi, lasciate un commento.
Lo script è stato testato con Firefox 2 e Internet Explorer 6 ma se avete la possibilità di testarlo con altri browser vi prego di comunicarmelo.

http://www.simonerodriguez.com/wp-content/plugins/downloads-manager/img/icons/download.png Download: Script Ajax form submit ()
Data: 21/02/2010
Click: 47558
Descrizione:

QUI trovate una DEMO

NON DIMENTICATE DI VOTARMI SU DIGG ->

5. Immagini per il ‘Loading’
La fase di invio/attesa dati può essere personalizzata con una bella gif, eccovene alcune.
Ricordate che passando del codice HTML tramite la funzione xmlhttpPost i doppi apici (“) devono essere sostituti con lo slash e l’apice (\’).

Aggiungo in fine questo fantastico sito AjaxLoad che permette in perfetto stile web 2.0 di crearsi la propria immagine di caricamento.

Info su 

Appassionato di tecnologia e programmazione. Attualmente ritirato alla vita bucolica in Umbria

131 Responses to “Form Submit in Ajax – Script per principianti”
  1. SimoneRodriguez 21 febbraio 2008
  2. Anonimo 29 febbraio 2008
  3. SimoneRodriguez 29 febbraio 2008
  4. Alex 31 marzo 2008
  5. SimoneRodriguez 31 marzo 2008
  6. Luigi 8 luglio 2008
  7. Alessio 20 luglio 2008
  8. Alessio 17 marzo 2010
  9. Alessio 17 marzo 2010
    • SimoneRodriguez 17 marzo 2010
  10. Alessio 17 marzo 2010
  11. Paolo 1 aprile 2010
  12. Paolo 1 aprile 2010
  13. SimoneRodriguez 1 aprile 2010
  14. Paolo 2 aprile 2010
  15. Paolo 2 aprile 2010
  16. francesco 14 giugno 2010
  17. Mauro 12 agosto 2010
    • SimoneRodriguez 12 agosto 2010
  18. Mauro 13 agosto 2010
  19. Mauro 17 agosto 2010
  20. Giuseppe 24 agosto 2010
  21. Valda 5 settembre 2010
    • valda 7 settembre 2010
  22. Luca 10 settembre 2010
  23. guido 18 settembre 2010
    • michele 20 settembre 2010
  24. michele 20 settembre 2010
  25. Francesco Goffredo 6 ottobre 2010
  26. Filippo 18 ottobre 2010
    • Francesco Goffredo 19 ottobre 2010
  27. Filippo 20 ottobre 2010
  28. mahmud 21 novembre 2010
  29. carlito 5 dicembre 2010
    • Giulio 3 gennaio 2013
  30. Loelle80 17 dicembre 2010
    • Loelle80 17 dicembre 2010
  31. giuseppe 13 gennaio 2011
    • Loelle80 13 gennaio 2011
      • giuseppe 14 gennaio 2011
  32. meabe 18 gennaio 2011
  33. Vinicius 28 febbraio 2011
  34. Plínio Thalles 8 marzo 2011
  35. Gennaro 5 aprile 2011
  36. Gennaro 5 aprile 2011
  37. Peter 15 aprile 2011
  38. damien 6 luglio 2011
  39. Ricki 13 ottobre 2011
  40. rob 1 marzo 2012
  41. rob 1 marzo 2012
  42. 123 24 marzo 2012
  43. oops 28 maggio 2012
    • Loelle80 28 maggio 2012
      • oops 28 maggio 2012
        • Loelle80 28 maggio 2012
          • Loelle80 28 maggio 2012
  44. Tamas 4 giugno 2012
  45. salvatore de giorgi 10 agosto 2012
    • Simone 10 agosto 2012
  46. Sridhar 20 agosto 2012
  47. Sandro 9 ottobre 2012
    • Willy 13 aprile 2013
  48. Sandro 9 ottobre 2012
  49. Alberto 3 luglio 2013
  50. michele 15 dicembre 2013

Leave a Reply

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *