Conveniently, I'm just now developing a script to do, among a couple other things, exactly what you want. Note, however, that I haven't tested this yet; if you post your form source, I will test them together and be very appreciative. 
(See below for usage instructions.)
Code:
function getAjax(){
if(XMLHttpRequest)
// Firefox, Opera 8.0+, Safari, Internet Explorer 7+
return new XMLHttpRequest();
else if(ActiveXObject){
// Internet Explorer 6-
var types = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
for (var i = 0; i < types.length; i++)
try {
return new ActiveXObject(types[i]);
} catch(e) {}
}
return null;
}
function Form(name){
var that = this;
var form = document.forms[name] || document.getElementById(name);
form.onsubmit = function(event){
event = event || window.event;
(that.onsubmit || function(){})(event);
return false;
};
this.getElements = function(withNulls){
var elements = [];
for(var i = 0, element = form.elements[0]; i < form.elements.length; element = form.elements[++i])
if(withNulls || element.value)
elements.push(elements[element.name] = element);
return elements;
};
this.update();
this.getValues = function(withNulls){
var values = [];
for(var i = 0, element = form.elements[0]; i < form.elements.length; element = form.elements[++i])
if(withNulls || element.value)
values.push(values[element.name] = element.value);
return values;
};
this.setValues = function(values){
for(var i = 0, element = form.elements[0]; i < form.elements.length; element = form.elements[++i])
element.value = values[element.name] || element.value;
};
this.submit = function(method, action, elements){
if(elements)
this.setValues(elements);
form.onsubmit();
form.submit();
};
this.ajax = function(callback, method, action, async, elements){
var ajax = getAjax();
if(ajax){
method = (method || form.method).toUpperCase(),
query = Form.makeQuery(elements || this.getElements());
ajax.open(method || form.method,
(action || form.action) + (method === 'GET' ? '?' + query : ''),
async !== false);
ajax.onreadystatechange = function(){
if(this.readyState === 4)
callback({text: this.responseText, xml: this.responseXML});
};
ajax.send(method === 'POST' ? query : null);
return true;
}else
return false;
};
}
Form.makeQuery = function(elements){
var query = [];
for(var i = 0; i < elements.length; i++)
query.push(elements[i].name + '=' + elements[i].value);
return query.join('&');
};
Form.prototype = {
validate: function(callbacks, values){
values = values || this.getValues(true);
for(var i = 0, value = values[callbacks[0].name]; i < callbacks.length; value = values[callbacks[++i].name])
if(value && !callbacks[i](value))
return false;
return true;
},
update: function(){
this.elements = this.getElements(true);
}
};
To use it, put a form tag around your fields and adorn it with method="GET" and action="<?php echo $_SERVER['PHP_SELF']; ?>" attributes. (If the page is loaded in response to a form submission, do the same thing but without JS.) Link to the script and, in a separate script tag at the end of the body, link to this one (with all placeholders replaced):
Code:
var form = new Form("your form's name or id");
var menu = form.elements.menu; // Change "menu" to your dropdown's name.
menu.onchange = function(){
form.ajax(callback, null, "the_thinking.php", null, [menu]);
};
function callback(response){
//Change the fields' values here according to response.xml or response.text.
}
The mini-framework should take care of everything else.
Php/Mysql/Ajax (updating fields of a form of a page using Ajax)
Reply With Quote
Bookmarks