I am currently using Telesign (www.telesign.com) for phone verification and antifraud on a freebie site I administer. Currently, I have code that allows a "user" to input their phone number into a form, which then posts to a php file that uses SOAP to tell telesign to call them. They get a verification code, and then they need to enter that code in on the page that the form was posted to, which then posts to a status page to check the code. Confusing! Here is what it looks like: Form on order page-->telesign.php(calls user and gives from for code)-->posts to the status page, which returns the result of the query (this will eventually be entered into a mysql DB, but for now, it goes to this page) What I need to do is use AJAX or some other asynchronous type of language to send the request in the background, but I have no idea how to do it. I want it to go like this: Form on order page-->telesign.php using ajax ajax posts the form and waits for the response. ajax gets the response (a variable called the refid) A box pops up and asks for the code user enters code, and ajax passes it to the status file if the user is verified, then it will be entered on mysql, and the verification form will not display anymore (I can do this with a PHP if) This is brutal IK, but any tips are greatly appreciated! Tim
Proforma AJAX/PHP POST code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Registration Form</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> var AdminResponse = ""; function parseResponse(){ var nMessage = document.getElementById('echoMsg'); nMessage.style.display = ''; nMessage.innerHTML = AdminResponse; } function registerUser(){ var AdminRequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest(); AdminRequest.onreadystatechange = function() { if (AdminRequest.readyState == 4) { if (AdminRequest.status == 200) { AdminResponse = AdminRequest.responseText; parseResponse(); } else { alert('Error postIt.php File '+ AdminRequest.statusText); } } } var nForm = document.forms[0]; var infoStr = "fname=" + nForm['firstName'].value; infoStr += "&surname=" + nForm['surName'].value; AdminRequest.open("POST", "postIt.php", true); AdminRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); AdminRequest.send(infoStr); } function validate(nForm){ document.getElementById('echoMsg').style.display = 'none'; for (i=0; i<nForm.length; i++) { if (nForm[i].value == "") { alert('Please complete all fields'); return false; } } registerUser(); } </script> <style type="text/css"> body {background-color:#eae3c6;margin-top:60px} form {width:240px;margin:auto} fieldset {width:210px;background-color:#f0fff0;border:1px solid #87ceeb} legend {font-family:times;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px} label {font-family:times;font-size:12pt;color:#00008B;padding:5px} .submitBtn {display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px} .formField {font-family:times;font-size:10pt;margin-bottom:3px} #echoMsg {font-family:tahoma;font-size:13pt;color:black;border:1px solid black;padding:5px;width:275px;height:auto;background-color:#87ceeb;margin-bottom:10px;margin-left:auto;margin-right:auto;text-align:center} </style> </head> <body> <div id='echoMsg' style='display:none'></div> <form action=""> <fieldset> <legend>Personal Information</legend> <label>First Name: <input type='text' size='15' name='firstName' class='formField'></label> <label>Surname: <input type='text' size='15' name='surName' class='formField'></label> <input type='button' name='submit' value="Submit" class='submitBtn' onclick="validate(this.form)"> </fieldset> </form> </body> </html> Code (markup): postIt.php: <?php $message = "First Name - " . $_POST['fname'] . "<br>"; $message .= "Surname - " . $_POST['surname']; echo stripslashes($message); ?> Code (markup):