can anyone tell me how to code a script in AJAX which will check if all the fields in a form are filled in and then display an image beside the field indicating the info in the field is correct. the script will also check to see if the security image code is correct and if the email address is valid and then let the user submit the form. can anyone help?
AJAX coding prob
if you're using a CAPTCHA to prevent spamming, you wont want to check by javascript: check w/ php (javascript is so transparent and easily hacked)
For the simple form validation, you wont need any ajax
For the simple form validation, you wont need any ajax
Assuming that you have your CAPTCHA system up and running already for the user to enter in the image word...
JavaScript can do something like this:
The above code, upon filling out the form and calling the function ajaxCheckForm, will post to validate.php the following information:
$_POST['u']
$_POST['p']
$_POST['iw']
$_POST['ih']
$_POST['e']
Do what you want with the above code in PHP. When PHP has decided that the image word and the image hash match after looking the two up in the database, as well as any other validation information e.g. "username already taken" "email already used" etc... then whatever PHP echos back will become the body of a new JavaScript function that will self execute.
e.g. you might want validate.php after having received the post data and having validated the info to echo the following back:
The above JavaScript would dynamically, at run time, locate the INPUT element with either the name or id "username" and add a <span style="color:red">already taken</span> prior to the element.
JavaScript can do something like this:
| Code: |
|
<script type="text/javascript"> var xmlhttp=false; /* running locally on IE5.5, IE6, IE7 */ ; /*@cc_on if(location.protocol=="file:"){ if(!xmlhttp)try{ xmlhttp=new ActiveXObject("MSXML2.XMLHTTP"); }catch(e){xmlhttp=false;} if(!xmlhttp)try{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){xmlhttp=false;} } ; @cc_off @*/ /* IE7, Firefox, Safari, Opera... */ if(!xmlhttp)try{ xmlhttp=new XMLHttpRequest(); }catch(e){xmlhttp=false;} /* IE6 */ if(typeof ActiveXObject != "undefined"){ if(!xmlhttp)try{ xmlhttp=new ActiveXObject("MSXML2.XMLHTTP"); }catch(e){xmlhttp=false;} if(!xmlhttp)try{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){xmlhttp=false;} } /* IceBrowser */ if(!xmlhttp)try{ xmlhttp=createRequest(); }catch(e){xmlhttp=false;} </script> <script type="text/javascript"> function ajaxCheckForm(){ var u_n_=encodeURIComponent(document.forms[0].username.value); var p_=encodeURIComponent(document.forms[0].password.value); var i_w_=encodeURIComponent(document.forms[0].imageword.value); var i_h_=encodeURIComponent(document.forms[0].imagehash.value); var e_=encodeURIComponent(document.forms[0].email.value); xmlhttp.open('POST',"validate.php",true); xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xmlhttp.send("u="+u_n_+"&p="+p_+"&iw="+i_w_+"&ih="+i_h_+"&e="+e_); xmlhttp.onreadyStateChange=function(){ if(xmlhttp.readyState!=4)return; new Function(xmlhttp.responseText)(); } } </script> |
The above code, upon filling out the form and calling the function ajaxCheckForm, will post to validate.php the following information:
$_POST['u']
$_POST['p']
$_POST['iw']
$_POST['ih']
$_POST['e']
Do what you want with the above code in PHP. When PHP has decided that the image word and the image hash match after looking the two up in the database, as well as any other validation information e.g. "username already taken" "email already used" etc... then whatever PHP echos back will become the body of a new JavaScript function that will self execute.
e.g. you might want validate.php after having received the post data and having validated the info to echo the following back:
| Code: |
|
var span=document.createElement("span"); span.style.color="red"; span.appendChild(document.createTextNode("already taken")); document.forms[0].username.parentNode.insertBefore(span,document.forms[0].username); document.forms[0].username.focus(); |
The above JavaScript would dynamically, at run time, locate the INPUT element with either the name or id "username" and add a <span style="color:red">already taken</span> prior to the element.
You really don't need AJAX for an onscreen for validation that you are asking. JavaScript can easily do it also the images can be preloaded.
But if you feel that is a waste of bandwidth then you can easily write that Ajax script yourself. Try the w3schools tutorials or more found here:
http://www.frihost.com/forums/vt-66049.html
But if you feel that is a waste of bandwidth then you can easily write that Ajax script yourself. Try the w3schools tutorials or more found here:
http://www.frihost.com/forums/vt-66049.html
 |