Hi, I have a form which when the post code is entered i need the rest of the address to be filled in if the a auto fill button is pressed. Does anyone have any ideas on how i will do this? Cheers, Adam
Well, the postcode isn't normally enough to uniquely identify an address - you probably need a house number too. But, in essence, you'd use ajax to fire off a request to your server, get the results back, and then pop them into the form.
Any direction on where i go find out how to do this as i have not had a lot of dealing with ajax so am not the best at it.
Yup - this one is ideal for you as it pretty much does exactly what you want interface wise.... http://www.webpasties.com/xmlHttpRequest/ Essentially all AJAX is is a way of making another page request without leaving the page you're on. The results are then pumped into a javascript object rather than the page. You can then grab the results and stuff them into another element on your page. Of course, it'll be up to you to do the behind the scenes database lookup and work out what to return. Good luck with the primer!
Thanks for you reply. I almost have it working now. I can get the answer to come back as one echo message but need to return each value as a variable so i can echo them out in the relevant text box. This is my form page <!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 lookup.php File '+ AdminRequest.statusText); } } } var nForm = document.forms[0]; var infoStr = "housenumber=" + nForm['housenumber'].value; infoStr += "&postcode=" + nForm['postcode'].value; AdminRequest.open("POST", "lookup.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> </head> <body> <div id='echoMsg' style='display:none'></div> <form action=""> <fieldset> <legend>Personal Information</legend> <label>House No : <input type='text' size='15' name='housenumber' class='formField'></label> <label>Postcode: <input type='text' size='15' name='postcode' class='formField'></label> <input type='button' name='submit' value="Submit" class='submitBtn' onClick="validate(this.form)"> </fieldset> </form> </body> </html> Code (markup): And this is the page i am submitting to: <?php include ("includes/top.php"); $postcode = str_replace( ' ', '', $_POST['postcode'] ); $ch = curl_init("http://postcodeloopup.php?postcode=$postcode"); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); $value = curl_exec($ch); preg_match_all('/<(Street|Locality|Town|TVRegion|Latitude|Longitude)>([^<]+)<\/\\1>/', $value, $matches); $street .= $matches[2][0]; $town .= $matches[2][1]; $region .= $matches[2][2]; $latitude .= $matches[2][3]; $longitude .= $matches[2][4]; $message = "House Number - " . $_POST['housenumber'] . "<br>"; $message .= "Postcode - " . $postcode. "<br>"; $message .= "Street - " . $street. "<br>"; $message .= "Town - " . $town. "<br>"; $message .= "Region - " . $region. "<br>"; $message .= "Latitude - " . $latitude. "<br>"; $message .= "Longitude - " . $longitude. "<br>"; echo stripslashes($message); ?> Code (markup): Any ideas?
Can you repeat the question? Can't quite work out what you're asking. Also, http://postcodeloopup.php?postcode=$postcode Is that meant to be "loopup" or "lookup"? And "She's Vicious", if you got nothing to say, don't say nothing!
Sorry that did not sound correct reading it back. Basically when i press the check address button i want it to return the entries and automatically enter them in the relevant text field so e.g. you enter postcode and number and the town and street etc get field in. What i cannot do at the moment though is get these value returned so i can echo them out in the right text field. It only returns all the values as one variable.
You should get your code to return the JavaScript that you would use to populate the various fields and then execute it on the client. I can't remember off the top of my head what the function is to do that in JavaScript (in PHP it's 'eval') but that is basically what you would have to do. Or make an AJAX request per field.
Oh I like the idea of returning the code then eval'ing it. Smart! Alternately, just insert some delimiter into the response, and then parse the return variable using javascript to find that delimiter to get each element of the address.
ok, lets say in the script which you call using ajax, you do something like... echo $house; echo "^"; echo $street; echo "^"; echo $town; echo "^"; echo $postcode; your results would come back as something like... 25^Acacia Avenue^Sometown^NW1 4LE You end up with that in a variable and use javascripts split function (much the same as explode in PHP) to turn it into an array... so if returnValue contains the above, doing this in javascript.... returnArray=returnValue.split('^'); then... returnArray[0]='25' returnArray[1]='Accacia Avenue' etc etc Which you can then stuff into your elements as required
Thank you for your further reply. I understand what i am supposed to do unsure where to put the above code and how to get the the returnArray[0] to be echoed in the correct text field. Where in here do i add the code ? <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 lookup.php File '+ AdminRequest.statusText); } } } var nForm = document.forms[0]; var infoStr = "housenumber=" + nForm['housenumber'].value; infoStr += "&postcode=" + nForm['postcode'].value; AdminRequest.open("POST", "lookup.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> Code (markup): Also how do i echo the a result in this form? <form action=""> House No :<input type='text' size='15' name='housenumber' class='formField'> Postcode:<input type='text' size='15' name='postcode' class='formField'> Street:<input name='street' type='text' class='formField' id="street" size='15'> Town:<input name='town' type='text' class='formField' id="town" size='15'> Region:<input name='region' type='text' class='formField' id="region" size='15'> <input type='button' name='submit' value="Submit" class='submitBtn' onClick="validate(this.form)"> </form> Code (markup): Thanks for you help.
Well, you echo the result into the form like this.... <input type='text' size='15' name='housenumber' class='formField' value='<?php echo array[0]?>'>
Cheers for that and sorry for the further stupidity but where do i return the values in the javascript above?
Ok, I'll break it down - though this is feeling a little like I'm doing your homework for you rather than giving some advice! The user enters their house number and postcode on the form. That gets processed by your function RegisterUser, yes? That sends an ajax call to your file lookup.php, passing the parameters along. The request object links up with the respnse object, and that gets the results from the ajax call, yes? So, something like 21^Acacia Avenue^Sometown^NW1 4TT ends up in AdminResponse. You then have a funtion called "ParseResponse" which currently reads that string and stuffs it into the innerHtml. Instead, change ParseResponse to explode the results using the javascript function split. Then instead of setting the whole lot into 1 innerHtml, place each element of the array into the respective form element. You've got all the basic components you need: A form to capture the postcode and house number Something to trigger a javascript function when they're populated A javascript function to make an ajax call to your server A php file on your server to receive that call and return some results A javascript routine to parse the results Some form elements ready to be set to those results by the parse routine That's really about it - anymore and i'll have basically written it for you.
I am sorry but i just cannot get my head around this. Trust me i have tried but i just don't have any experience with Javascript of Ajax so i am finding this impossible. I get what you are trying to tell me but it just is not happening for me. I have done the following which looks like it should work: function parseResponse(){ var nMessage = document.getElementById('echoMsg'); nMessage.style.display = ""; nMessage.innerHTML = AdminResponse; var returnArray=nMessage.split('^'); } Code (markup): But then i just don't know how to assign the array elements and then echo them out individually. Please can you help on this last but and i will be eternally grateful. Cheers, Adam
Ok, a few things... Your form doesn't have a name yet. So change that so it does, else you can't reference the elements very easily... <form action="" name="addressForm"> Now, your parseResponse should read something like... function parseResponse(){ var returnArray=AdminResponse.split('^'); document.addressForm.housenumber.value=returnArray[0]; document.addressForm.street.value=returnArray[1]; etc, etc } Code (markup): So, addressForm is the name of the form, and then each element in the form is addressed by name. If you still can't get it to work, pm me the url, and i'll have a look at the code you have.