Page 1 of 1

Verifying a zip code in a form before submitting all data?

Posted: Tue Nov 08, 2011 2:19 am
by nou
Hello. I'm trying to build something like this:

Code: Select all

<form action="" method="post">
Name: <input type="text" name="username"><br/>
Age: <input type="text" name="userage"><input type="submit" value="Verify"><br/>
Zip Code: <input type="text" name="userzip"><br/>
<input type="submit">
</form>
wherein the Verify button next to the Age box will query the database, validating the zip code, at which point the user can then submit the form. Does anyone have any experience with this? thx

Re: Verifying a zip code in a form before submitting all dat

Posted: Tue Nov 08, 2011 2:55 am
by Gopesh
Hi,pls give some more explanation for your problem.what u want to acheive using the verify button?

Re: Verifying a zip code in a form before submitting all dat

Posted: Tue Nov 08, 2011 3:02 am
by nou
I want the verify button to do this php script:

Code: Select all

$userzip = $_POST['userzip'];
$query = sprintf("SELECT * FROM zip_codes WHERE zip = $userzip");
$result = mysql_query($query);
while ($row = mysql_fetch_array($result)) {
   echo $row['city'];
}

Re: Verifying a zip code in a form before submitting all dat

Posted: Tue Nov 08, 2011 3:03 am
by mikeashfield
This is what you're looking for, I think.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 


<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>ZIP Code to City and State using XmlHttpRequest</title> 
<script language="javascript" type="text/javascript"> 

var url = "getZip.php?zipcode="; // The server-side script 


function updateList() { 
  if (http.readyState == 4) { 
       // Use the XML DOM to unpack the zip, city and state values 
      var xmlDocument = http.responseXML;  
      list = document.createElement('div');  // to hold the tree of results 
      for (i in xmlDocument.firstChild.childNodes) { 
         var el = xmlDocument.firstChild.childNodes[i]; 
         if (el.nodeName=='zip') {  // just the zip tags 
            var zipcode = el.childNodes[0].firstChild.data 
            var city = el.childNodes[1].firstChild.data; 
            var state = el.childNodes[2].firstChild.data; 
            var x = document.createElement('div'); 
            var t = document.createTextNode(zipcode +': ' + city + ', ' + state); 
            x.appendChild(t); 
            list.appendChild(x); 
         } 
      } 
      var divlist = document.getElementById('list'); 
      divlist.removeChild(divlist.firstChild); 
      divlist.appendChild(list); 
      isWorking = false; 
  } 
} 


var isWorking = false; 

function getList() { 
  if (!isWorking && http) { 
    var zipcode = document.getElementById("zip").value; 
    http.open("GET", url + escape(zipcode), true); 
    http.onreadystatechange = updateList;   
          // this sets the call-back function to be invoked when a response from the HTTP request is returned 
    isWorking = true; 
    http.send(null); 
  } 
} 

function getHTTPObject() { 
  var xmlhttp; 
  /*@cc_on 
  @if (@_jscript_version >= 5) 
    try { 
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); 
    } catch (e) { 
      try { 
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch (E) { 
        xmlhttp = false; 
      } 
    } 
  @else 
  xmlhttp = false; 
  @end @*/ 
  if (!xmlhttp && typeof XMLHttpRequest != 'undefined') { 
    try { 
      xmlhttp = new XMLHttpRequest(); 
      xmlhttp.overrideMimeType("text/xml");  
    } catch (e) { 
      xmlhttp = false; 
    } 
  } 
  return xmlhttp; 
} 

var http = getHTTPObject(); //  create the HTTP Object 


</script> 

</head> 
<body> 
<h1>US Zipcode decoder</h1> 
<form onSubmit="getList(); return false"> 
  <p> 
  ZIP code: 
  <input type="text" size="5" name="zip" id="zip"  
         onkeyup="getList();" onfocus="getList();"  
  /> e.g. 95472 
  </p> 
  <div id="list"/> 
</form> 
</body> 
</html> 
Working example.

Re: Verifying a zip code in a form before submitting all dat

Posted: Tue Nov 08, 2011 3:14 am
by Gopesh
ok.if u need to get the results without page refreshing,use ajax. check this for understanding ajax http://www.w3schools.com/php/php_ajax_php.asp