JS Feature Help

[orso]

Hi, I do know Javascript very well and was wonder if anybody could tell me how to recreate this feature on this site.

http://www.maxbats.com/baseballbats.php

Change something in the order form.

Thanks.

[Ultragames]

Now you cannot steal this code from them, but you can read it and take a look at how it work:

var http_request = false;
function makePOSTRequest(url, parameters) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
// set type accordingly to anticipated content type
//http_request.overrideMimeType('text/xml');
http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}

http_request.onreadystatechange = alertContents;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("Content-length", parameters.length);
http_request.setRequestHeader("Connection", "close");
http_request.send(parameters);
}

function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
//alert(http_request.responseText);
result = http_request.responseText;
var resultArray = result.split("|");
document.getElementById('myspan').innerHTML = resultArray[0];
} else {
alert('There was a problem with the request.');
}
}
}

function get(obj) {
var poststr = "qty=" + encodeURI( document.getElementById("qty").value ) +
"&length=" + encodeURI( document.getElementById("length").value ) +
"&handle=" + encodeURI( document.getElementById("handle").value ) +
"&barrel=" + encodeURI( document.getElementById("barrel").value ) +
"&logo=" + encodeURI( document.getElementById("logo").value ) +
"&weight=" + encodeURI( document.getElementById("weight").value ) +
"&productID=" + encodeURI( document.getElementById("productID").value ) +
"&customBatID=" + encodeURI( document.getElementById("customBatID").value ) +
"&engraving=" + encodeURI( document.getElementById("engraving").value );
makePOSTRequest('ajax/bat_update.php', poststr);
}


They are using a function called get() that is being called any time that any of the inputs are changed via onchange="get(this.submit)". That function gets the values of all of the feilds and sends them to a page called bat_update.php which then generates the image tag that they then replace the old image with.

The PHP page is where all of the magic is happening. They are either pulling one of many images out of a folder using the variables, or they are using the GD library in PHP to build the image. The AJAX functionality is simple and popular, but if you need to do the same type of image changes they are doing, you'll need to learn some serious PHP.

Note: The image name appears to be a serialized copy of the variables they are using for the image generation.