Instantly share code, notes, and snippets.

What would you like to do?
Cross-browser solution to change the 'type' attribute of an `<input/>` tag. Edited to work in Drupal.
/* id is the id tag of <input/> element
type is the type you want to change it to.
jQuery is required and assumed to be the jQuery variable */
function changeType(id, type) {
var x = jQuery("#"+id);
if(x.attr('type') == type)
return x; //That was easy.
try {
return x.attr('type', type); //Stupid IE security will not allow this
} catch(e) {
//Try re-creating the element (yep... this sucks)
//jQuery has no html() method for the element, so we have to put into a div first
var html = jQuery("<div>").append(x.clone()).html();
var regex = /type=(\")?([^\"\s]+)(\")?/; //matches type=text or type="text"
//If no match, we add the type attribute to the end; otherwise, we replace
var tmp = jQuery(html.match(regex) == null ?
html.replace(">", ' type="' + type + '">') :
html.replace(regex, 'type="' + type + '"') );
//Copy data from old element'type','type') );
var events ='events');
var cb = function(events) {
return function() {
//Bind all prior events
for(i in events)
var y = events[i];
for(j in y)
tmp.bind(i, y[j].handler);
setTimeout(cb, 10); //Wait a bit to call function
return tmp;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment