Filling out default info on form via Ajax

[wzeller]

I have what I would expect to be a common challenge, and yet after hours of searching I can't find where it has been addressed in any kind of Ajax tutorial.

I have a form used by order administrators to enter orders for wholesale customers.

It has store name, contact name, phone, street address, city, state, zip and country fields, among others.

The store name field is a pulldown menu whose options are generated at page load by a php script that pulls them out of a database.

I'd like to implement an Ajax script where, when a store is selected from the pull down menu the page pulls all the contact and address infomation from the database and populates the fields with that information as the default.

Passing the argument to the server is easy enough: I can just make the store name pull down associate the primary key of the stores table with the store name and then pass that back. (As in, <option value="12">Visible Store Name</option>, so that I just pass the 12 back to the script if "Visible Store Name" is chosen from the pull down, and then the server side script pulls all the address info for store #12.

But then how do I get the information to populate the fields? Just printing out the results of the query is easy enough, but I can't figure out how to address the individual values and put them into the value attributes of the fields.

I am an absolute AJAX n00b. This is the first time I've ever even looked at it, and I feel totally lost with it. So any help at all would be greatly appreciated.

Thanks
Wayne

[sde]

Hi Wayne,

How many possible stores are there. If there's not a lot, then it seems to make more sense to just print out an array of the information in a script on the page.

If you are going to use AJAX though, what is the server-side language you are using? ( php, asp, java, ..)

Here is an example of a the javascript that might be used for your situation:

var xmlHttp;

function createXMLHttpRequest() {
	if (window.ActiveXObject) {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	else if (window.XMLHttpRequest) {
		xmlHttp = new XMLHttpRequest();
	}
}

function startRequest(method, URL) {
	createXMLHttpRequest();
	xmlHttp.onreadystatechange = handleStateChange;
	xmlHttp.open(method, URL, true);
	xmlHttp.send(null);
}

function handleStateChange() {
	if (xmlHttp.readyState == 4) {
		if (xmlHttp.status == 200) {
			processResponse(xmlHttp.responseXML);
		}
	}
}

function processResponse(response) {
	// set your html form from the results here
}

you would need a server script to output xml, or, if JSON is installed, it could output a javascript array format.

in the element that the user selects the store, you will need an onchange event to call the startRequest function. the call would look something like this:

startRequest('GET', 'http://myserver.com/getstoreadress.php?storeid=152');

if the call was being made from a selectbox dropdown, you could assign the store id's to the value of each drop down and just dynamically call this in the select tag like so

<select name="stores" onchage="startRequest('GET', 'http://myserver.com/getstoreaddress.php?storeid=' + this.value);">

when this is called, it sends the request to the server, and returns xml. ( or text if you use json. ) you need to modify the processResponse function to parse the xml and set the values of the address fields.

i did not test this code for your situation, but it should be close to what you need. a google search for ajax resposneXML should turn up plenty of examples of how to parese the returned XML.

keep us updated on the progress.

[wzeller]

Thanks so much for such an amazingly detailed answer!

I hadn't heard of JSON before, so I looked it up and found a script that would encode my database response to JSON without having to have the whole package installed.

Right now there are only a couple hundred stores, but we hope to soon have thousands, so this is looking more and more like the way to go. At this point, the store can be selected from a pull down. Eventually, the data entry admin will need to type in a store id. But the AJAX code will be unchanged - it will just be an input field instead of a select field.

I'm using a php script on the backend to generate the response. Here's a sample response:

{"id":"18","storename":"Sample Store Is Us","contactname":"Sammy Sample","phone":"123-456-7890","email":"demo@demo.com","address":"123 Somplace St.","city":"Anywhere","state":"OR","zipcode":"12345","country":"United States"}

Now, in trying to use that with the processResponse function of the script you provided, I can't seem to figure out how to address the values.

I'm certain I'm just missing something fundamental, but I'm at a loss.

I changed the call to processResponse in the handleStateChange function to: processResponse(xmlHttp.responseText) (instead of responseXML). I used an alert(response) within processResponse to verfy that the response string is there, and it is. But then how do I parse it?

Ultimately, I'm thinking the value assignation commands will look something like:

document.forms.formname.storename.value=xmlhttp.something;
document.forms.formname.contactname.value=xmlhttp.something;
document.forms.formname.address.value=xmlhttp.something;
document.forms.formname.city.value=xmlhttp.something;
document.forms.formname.state.value=xmlhttp.something;
document.forms.formname.zipcode.value=xmlhttp.something;
document.forms.formname.phone.value=xmlhttp.something;

But I need to replace the somethings with, well, something.

It seems I'm a hairs breadth away from getting it to go.

Any further tips?

Thanks again,
Wayne

[sde]

well if you have it in a javascript array format, then it is simple.

You are correct in using responseText, and now you just use the eval function to assign it to a javascript array.

in my code example, you would use responseText as the argument passed to processResponse(), .. then in processResponse() you would set the javascript array like this:

function processResponse(responseText) {
  var myarray = eval(responseText);
  
  document.forms.formname.storename.value=myarray['storename'];
  document.forms.formname.contactname.value=myarray['contactname'];
  document.forms.formname.address.value=myarray['address'];
  document.forms.formname.city.value=myarray['city'];
  document.forms.formname.state.value=myarray['state'];
  document.forms.formname.zipcode.value=myarray['zipcode'];
  document.forms.formname.phone.value=myarray['phone'];
}

[wzeller]

Excellent. That works perfectly.

Thank you so much!

Wayne

[sde]

np, glad i could help