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.

[dm]18[/dm]
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.

136 Comments
  1. ciao, volevo chiederti se questo script si poteva usare con lightbox.
    Io apro tramite lightbox una pagina formOrder.php (dalla index.php) dove ho un form da compilare. Vorrei inviare i dati tramite ajax alla mia index. Io ho scritto così:
    Perchè non funziona?

  2. In linea di massima dovremme funzionare anche con lightbox ma non l’ho mai provato.
    I problemi potrebbero essere molti, ma se mi passi il link gli dò un’occhiata.

  3. purtroppo ora non ho lo spazio dove mettertelo. Se vuoi ti poso mandare i file via mail perchè io ora li vedo solo in locale nel mio server di prova.

  4. Dai manda… vediamo un pò

  5. Davvero fatto bene come script.
    Volevo chiederti su quale sito o su quale libro ()esperienza a parte posso farmi una discreta cultura su Ajax, Javascript e compagnia bella.
    Grazie

  6. Grazie! Ma non sono un esperto, ho solo discrete competenze di programmazione che mi permette di “creare” ciò che mi serve attingendo da internet. E quando ci riesco lo metto a disposizione…
    In poche parole non saprei cosa consigliarti : - ?

  7. Idem per me.
    Competenze di programmazione e ricerca su internet per dritte utili a risolvere i miei problemi… : - )
    Grazie comunque per la risposta al commento.

  8. Domandina: response_normal.asp è il file che inserisce eventuali dati nel db mentre response_ajax.asp si occupa soltanto di non ricaricare la pagina, ma fare apparire la voce di responso. O viceversa?
    Se invece dei dati inseriti volessi far comparire un’altra scritta?
    Ottima base per imparare, complimenti.

  9. “response_normal.asp” è la pagina che riceverebbe i dati nel caso in cui il javascript fosse disabilitato, viceversa i dati saranno inviati tramite xmlhttpPost alla pagina “response_ajax.asp”.
    Nel primo caso (…normal.asp) dovrai creare una pagina completa, nel secondo (…ajax.asp) sarà sufficiente processare i dati e magari rispondere.
    Chiaramente, l’esempio visualizza i dati ricevuti, solo per far vedere che funziona; tu però puoi: ricevere i dati, inserirli ne DB, e con un “response.write” (nel caso dell’asp) dare conferma dell’avvenuto inserimento, tutto tramite response_ajax.asp
    Ma questo è solo un altro esempio. Con i dati del form ci fai quello che ti serve e rispondi con quello che vuoi…

  10. Ed è qua che mi impapero. Con (..normal.asp) sappiamo come funziona, in (..ajax.asp), che per me è una novità, metto solo la parte di codice per processare i dati e l’eventuale risposta? E dopo il tutto come torna alla pagina iniziale? Attraverso lo script js?

  11. Gionni è esattamente così, ricordati solo di creare (nella pagina che invia) e specificare (quando richiami la funzione xmlhttpPost) il DIV che ne conterrà la risposta.
    Un gioco da ragazzi!

  12. Il Div di risposta se ho capito bene è ‘MyResult’, ma come mi devo regolare su (…ajax.asp) per farlo apparire sulla pagine del form? Idem per le icone di attesa.
    So’ altamente ignorante in materia… (e curioso come pochi)

  13. Si esatto, devi creare un DIV con ID MyResult… ma puoi anche cambiarlo purché ti ricordi poi di cambiarlo anche quando richiami la funzione xmlhttpPost.
    Il messaggio o icona di attesa lo imposti nell’ultimo parametro (wait…).
    Sia il messaggio di attesa che tutto cio che scriverò response_ajax.asp, apparirà nel DIV con ID MyResult.

  14. Non mi è chiaro come con il response.write, passo il ‘MyResult’ nel Div. Mi è oscuro il passaggio nel response… X - |
    Tutto ok con il ‘Wait..’ ho visto nell’esempio che basta linkare l’immagine nella chiamata ajax del form.

  15. Non mi è chiaro come con il response.write, passo il ‘MyResult’ nel Div. Mi è oscuro il passaggio nel response… X - |
    Tutto ok con il ‘Wait..’ ho visto nell’esempio che basta linkare l’immagine nella chiamata ajax del form.

  16. Gionni più chiara di così non te la sò fare:
    Se, per esempio, nel response_ajax.asp ci scrivi solo response.write “Ho ricevuto i dati”, inviando i dati dal form nel DIV MyResult apparirà la scritta “Ho ricevuto i dati”.

  17. Ah, pensavo ci fosse qualche riga di codice da aggiungere per specificare nel dettaglio… messa così… ci rimango male… 8 - ) mi sento stupido forte 8 - ) (sono come san tommaso, se non vedo il codice… nn credo, o meglio, non capisco)

  18. Il bello è che è proprio facile!
    Passa all’atto pratico e te ne renderai conto!
    P.S. Dopo tutto sto popò di assistenza ti tocca offrirmi una birra o almeno un linketto nel blog! : - P

  19. Rispondo solo al P.s. Erano già previste in origine entrambe le cose ; - )

1 2 3

Rispondi a SimoneRodriguez Cancel reply