Info Guide: Creare form che verrà gestito da JS

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:

<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>

Questo form esegue automaticamente il controllo dei dati senza procedere all' invio i essi.

Info Guide

martedì 10 dicembre 2013

Creare form che verrà gestito da JS

Nessun commento:

Posta un commento

Label Cloud!