Enhances hidden fields by making them editable if you click their container. This keeps the interface cleaner, but allows access to some bits if you really want.
To impliment, just give the hidden field a class of 'changeable' and onload the container item of that element will become clickable to bring the field to the fore. Optionally, another element can be removed to make way for it if it is named appropriately.
/////////////////////////////////////////////////////////////////
/**
* All instances of the input class:changeable will be found,
* and the id 'foo' deduced from it.
* An onClick event is added to the div/span/whatever nearby.
* When clicked, the hidden input will be removed and the exposed span will be replaced
* with an equivalent textfield.
* @author .dan. http://coders.co.nz/
*/
var CHANGEABLE_CLASS = "changeable";
var CHANGEABLE_BUTTON_PREFIX = "changeable_button_"; // added to the button id
var CHANGEABLE_HIDDEN_PREFIX = "hidden_" // added to the hidden field id
var CHANGEABLE_EXPOSED_PREFIX = "exposed_" // defines the displayed element which should be removed
/**
* Show a previously 'hidden' field in the page
* A Hidden input will be replaced dynamically with a textfield
* inline to its original location.
* If an optional second argument
* is given (the ID to the previous, uneditable label) that element
* is removed from the page.
* If called as an event handler (one paramenter - the event)
* then it tries to find the appropriate ids from context.
*/
function expose_hidden_field(id, del_id) {
if (document.getElementById) {
if(!del_id){ // called as an event handler, ok figure out our context
var e;
if(! (e = id.srcElement)){ e = id.target}
if(! e ) {return true;}
// may need to recurse up - the event may have been too specific-
// but is that a problem? this is interfering with other things that
// should not have triggered it
while(e.parentNode && (e.parentNode != e) && (! (e.id && e.id.match(CHANGEABLE_BUTTON_PREFIX)) ) ){
if(e.nodeName == 'INPUT' || e.nodeName == 'SELECT'){
//abort.
return false;
}
e = e.parentNode;
}
if(! e.id){ // failed to locate the correct container for this thing
alert('Failed to find a '+CHANGEABLE_BUTTON_PREFIX+" to hide. Ah well.");
} else {
id = e.id.substring(CHANGEABLE_BUTTON_PREFIX.length);
del_id = CHANGEABLE_EXPOSED_PREFIX + id.substring(CHANGEABLE_HIDDEN_PREFIX.length)
}
}
var f = document.getElementById(id);
if(f){
var container = f.parentNode;
var newField = document.createElement("input");
newField.setAttribute("type","text");
newField.setAttribute("name",f.getAttribute("name"));
newField.setAttribute("value",f.getAttribute("value"));
newField.setAttribute("size", 50);
newField.setAttribute("title",f.getAttribute("title"));
newField.setAttribute("id",id);
if(f.getAttribute("title")){
// enhance the field so the new field has a label
var labelBox = document.createElement("div");
var label = document.createElement("label");
newField.setAttribute("for", newField.getAttribute("name") );
label.appendChild( document.createTextNode(f.getAttribute("title")) );
labelBox.appendChild( label );
labelBox.appendChild( newField );
newField = labelBox;
}
container.replaceChild(newField,f);
// container.removeChild(f);
newField.style.width="95%";
// remove the older label that may have been a placeholder
remove_element_named(del_id);
var old = document.getElementById(CHANGEABLE_BUTTON_PREFIX+id);
if(old){
removeEvent( old, 'click' , expose_hidden_field );
}
// need to cancel the event now.
return true ;
} else { alert("Failed to find "+id); }
}
return false ;
}
/**
* Update all labelled 'changeable' hidden fields so they can be exposed with a click.
* The button is created programatically after page load, so should not effect anything with
* noscript
*/
function init_changeable_fields() {
if (document.getElementsByTagName) {
var f = document.getElementsByTagName('input');
for (var i=0; i
DOM by Dan