Form mail con javascript... come funzionano?

[jockerworks]

Ciao ragazzi, spero di postare nella giusta sezione perché sto cercando di capire come funziona il form in questa pagina:

http://mad4milk.net/

io sto provando ad usare mootools, e allo stesso tempo vorrei capire un pò meglio le basi di javascript.

e purtroppo si sa che per chi ha poca esperienza l'unica fonte è guardare i siti fatti dagli altri, almeno per quel che riguarda il client-side (sarà per questo che sono una pippa in PHP? )

il punto è, che cliccando su contact us mi appaiono i form anche in locale etc. etc., che significa che ho tutto ciò che è richiesto per funzionare, però ho notato che non c'è una pagina di action tipo submit.php o altro, ma allora come invia questo script la mail? e come si fa ad impostare il destinatario?

grazie a tutti, spero di non aver sbagliato sezione

[jockerworks]

ho pensato potesse essere di aiuto postare il codice che ho visto in questa pagina:

questo è il form:

<div id="form">
	<div class="form">

		<label>your name</label>
		

<input class="text" type="text" id="name" value="" /></p>
		<label>your e-mail</label>
		

<input class="text" type="text" id="mail" value="" /></p>
		<label>the subject</label>
		

<input class="text" type="text" id="subject" value="" /></p>
		<label>the message</label>

		

<textarea id="message"></textarea></p>
		<p class="submit">
			[img]images/cancel.png[/img]
			[img]images/send.png[/img]
		</p>
	</div>
</div>

e questo credo sia lo script java a cui si appoggia, ma di javascript so pochissimo e non vedo niente che assomigli ad un indirizzo e-mail... :

var Milk={start:function(){["Form","Contact","Cancel","Mail","Message","Subject","Name","Page","Send"].each(function(_1){Milk[_1]=$(_1.toLowerCase());});Milk.Form.setStyle("top",-Milk.Form.offsetHeight);Milk.Inputs=$$(Milk.Form.getElementsByTagName("input"),Milk.Form.getElementsByTagName("textarea")[0]).addEvent("keydown",function(){if(this.$tmp.error){this.setStyles({"background-color":"#fff","color":"#222"});}});Milk.FxOptions={"duration":400,"transition":Fx.Transitions.Expo.easeOut,"wait":false};Milk.Inputs.each(function(_2){_2.$tmp.fx=new Fx.Styles(_2,Milk.FxOptions);});Milk.Box=new Element("div",{"id":"box"}).injectAfter(Milk.Page).addEvent("click",Milk.endBox);Milk.BoxFx=new Fx.Styles(Milk.Box,Milk.FxOptions);Milk.FormFx=new Fx.Styles(Milk.Form,Milk.FxOptions);Milk.Contact.addEvent("click",Milk.startBox);Milk.Cancel.addEvent("click",Milk.endBox);window.addEvent("resize",function(){Milk.Box.setStyle("height",Window.getScrollHeight());});Milk.XHR=new XHR({onSuccess:function(rt){if(rt!="good stuff"){Milk.Contact.setHTML("mail error");}},onError:function(rt){Milk.Contact.setHTML("mail error");}});Milk.Send.addEvent("click",Milk.sendMail);},startBox:function(e){new Event(e).stop();if(Milk.BoxStarted){return;}
Milk.BoxStarted=true;Milk.Box.setStyles({"height":Window.getScrollHeight()});Milk.BoxFx.start({"opacity":[0,0.7]}).chain(function(){Milk.FormFx.start({"top":0}).chain(function(){Milk.BoxFxCompleted=true;});});},endBox:function(e){if(e){new Event(e).stop();}
if(!Milk.BoxFxCompleted){return;}
Milk.BoxStarted=false;Milk.BoxFxCompleted=false;Milk.FormFx.start({"top":-Milk.Form.offsetHeight}).chain(function(){Milk.BoxFx.start({"opacity":0.00001}).chain(function(){Milk.Box.setStyle("visibility","hidden");});});},sendMail:function(){var _7=[];Milk.Inputs.each(function(_8){if((_8==Milk.Mail&&!_8.value.test(/\w{1,}[@][\w\-]{1,}([.]([\w\-]{1,})){1,3}$/))||!_8.value){_7.push(_8);_8.$tmp.error=true;}});if(!_7.length&&Milk.Message.value.length<18){_7=false;Milk.Box.removeEvent("click",Milk.endBox);Milk.Form.getFirst().setStyles({"visibility":"hidden","height":0});Milk.Form.adopt(new Element("h5").setHTML("PLEASE, DONT PLAY WITH THE CONTACT FORM.").setStyles({"font-size":140,"color":"#fff","font-family":"Arial","font-weigth":"bold","padding":10}),new Element("h5").setHTML("It bothers us this much.").setStyles({"font-size":100,"color":"#fff","font-family":"Arial","font-weigth":"bold","padding":"0 10px"}));}
if(_7===false){Milk.XHR.send("/mail","name="+encodeURIComponent(Milk.Name.value)+"&mail="+Milk.Mail.value+"&message="+"subject:\n\n"+encodeURIComponent(Milk.Subject.value)+"\n\nmessage:\n\n"+encodeURIComponent(Milk.Message.value)+"&subject="+"some kid has just been pwned by the contact form!");(function(){Milk.Form.setStyle("background-color",(Milk.Form.getStyle("background-color")=="#000000")?"#fff":"#000000");}).periodical(30);}else{if(!_7.length){Milk.XHR.send("/mail","name="+encodeURIComponent(Milk.Name.value)+"&mail="+Milk.Mail.value+"&message="+encodeURIComponent(Milk.Message.value)+"&subject="+encodeURIComponent(Milk.Subject.value));Milk.Contact.setHTML("thank you for writing!").removeEvent("click",Milk.startBox).addEvent("click",function(e){new Event(e).stop();}).setStyle("left",240);Milk.endBox();}else{$$(_7).each(function(_a){_a.$tmp.fx.start({"background-color":"#ff3300","color":"#fff"});});}}}};window.onload=Milk.start;

[H5N1_Aviaria]

L'invio di email avviene tramite server: è quindi necessario utilizzare un linguaggio lato server come PHP o ASP o JSP.

[jockerworks]

si, di questo ero quasi sicuro, ma dal codice che ho riportato qui non si capisce come funziona questo script in particolare? io non vedo nessun action"submit.php" o equivalente per jsp, quindi come fa a funzionare questo form?

grazie per l'aiuto

[Xinod]

javascript non invia email,
tu non vedi l' action del form (1) ma i valori vengono passati ad una pagina che li elabora lato server,
che si trova nella cartella mail, con probabile nome di index.php o index.asp o altro (2)

Milk.XHR.send("/mail", ....

i valori vengono passati via ajax, un tecnica di interazione asincrona che puoi approfondire nella guida ad ajax di questo sito

tutto il resto, quello che vedi nel sorgente, e' fumo negli occhi
ripeto, javascript non ha modo di inviare email
ciao


(1) manca del tutto il tag form e il submit, quindi questo non e' un buon esempio di javascript degradabile perche' non ha possibilita' di funzionare in contesti dove javascript e' disabilitato
(2) via server potrebbe settare come index di default un qualsiasi nome con qualsiasi estensione

[jockerworks]

grazie mille, effettivamente qualcosa mi era poco chiar ^^'

e io non ho modo di vedere come è fatta questa pagina? se no nella guida di ajax posso anche imparare a creare un sistema simile a quello?

grazie ancora

[H5N1_Aviaria]

Lo script (Milk) fa uso di Ajax per inviare una richiesta al server.
Se sei digiuno di Javascript ti sconsiglio di addentrarti nella comprensione di Ajax prima di aver compreso cosa sia il DOM e un documento XML.

[jockerworks]

ok ho capito, cerco di mettermi un pò a studiare le guide su html.it :rollo:

che tu sappia per ora posso trovare qualche script da utilizzare simile a quello creato da mad4milk?

ti ringrazio ancora

[H5N1_Aviaria]

Il Web ne è pieno, ma un conto è utilizzarli così come sono ed un conto è capirli e personalizzarli.
Mi vengono in mente, al volo, mootools e script.aculo.us o anche fancy forms, che usa, però mootools.

[jockerworks]

provo a dare un occhiata, grazie per le spiegazioni