I've got an input which it's type is set to hidden, I need to change it's type to text. Can't seem to figure this out or if it's possible with jQuery
I'm not sure this is possible, so I would suggest using a hidden div to contain the input element, which can be shown as needed. The text input field can still hold data even if it's hidden.
IE won't allow you to change the type of a form element for security reasons so I would go with Aram's hidden div suggestion.
Here's how I would do this:
$("input[type='hidden']").each(function(){
var name = $(this).attr('name'); // grab name of original
var value = $(this).attr('value'); // grab value of original
/* create new visible input */
var html = '<input type="text" name="'+name+'" value="'+value+'" />';
$(this).after(html).remove(); // add new, then remove original input
});
If you want to filter some of the elements call filter() before each(), like this:
$("input[type='hidden']").filter("[name='whatever']").each(function...
easy man..
$('input[type="hidden"]).each (function() { this.type = 'text' });
Trigger it on a event
With jQuery 1.4 you can change the type of an input while it's detached.
marker = $('<span />').insertBefore('#myInput');
$('#myInput').detach().attr('type', 'text').insertAfter(marker);
marker.remove();
Overlay.toAnyType = function (c, type) {
var shadow = jQuery(document.createElement(c.context.nodeName));
// Clone attributes to new object.
for (var i = 0; i < c[0].attributes.length; i++) {
var attr = c[0].attributes[i].name;
var val = c[0].attributes[i].value;
if (attr == "type") val = type;
shadow.attr(attr, val);
}
shadow.insertAfter(c);
c.remove();
};
When c is a jQuery object; the function above changes type attribute. Usage:
var inputElemt = jQuery("#input");
Overlay.toAnyType(inputElemt, "text");
that doesn't work, jquery won't let you change the type attribute for some reason