Ajax permette di gestire comodamente un form, ma per fare ciò bisogna cambiare il pulsante da submit a button (per evitare il ricaricarsi della pagina),ma questo comporta alla perdita del controllo dei campi required introdotti in HTML. Questo può essere ovviato utilizzando il bottone di tipo submit e l’ evento onsubimit:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<html><head> <script> function logon(u,m,p){ var aj; //costruttore AJAX if (window.XMLHttpRequest) aj=new XMLHttpRequest(); //Su browser moderni else aj=new ActiveXObject("Microsoft.XMLHTTP"); //per vecchi IE aj.onreadystatechange=function(){ if (aj.readyState==4 && aj.status==200) alert(aj.responseText);}//otteniamo la risposta dal server aj.open("POST","http://dpdmancul.bugs3.com/logon.php",true); aj.setRequestHeader("Content-type","application/x-www-form-urlencoded"); aj.send("username_reg="+u+"&password_reg="+p+"&email_reg="+m);} //invio richiesta </script> </head> <body> <form id="log" method="post" action="" onsubmit="var user=document.forms['log']['user'].value; var mail=document.forms['log']['email'].value; var pass=document.forms['log']['pass'].value; logon(user,mail,pass);return false;"> <!--- onsubmit="return false;" : quando il form è pronto per l' invio non inviarlo --> <h1>LOGON</h1> <input type="text" id="user" placeholder="Username" required > <input type="text" id="email" placeholder="E-mail" required > <input type="password" id="pass" placeholder="Password" required > <!--- button type="submit" : permette il controllo dei campi required e poi esegue onsubmit--> <button type="submit" class="button"> Registrati </button></br> <input type="checkbox" id="checkbox1" required><label for="checkbox1" >Acconsento al trattamento dei dati personali sopra riportati da parte del gestore della pagina</label> </form></body></html> |
Questo form esegue automaticamente il controllo dei dati senza procedere all’ invio i essi.
