jQuery: Change element type from hidden to input

Question

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

Duplicate of http://stackoverflow.com/questions/1544317/jquery-change-type-of-input-field — thisgeek, Nov 09 '12 at 20:00

score 58 · Accepted Answer · edited Jul 19 '14 at 16:07

58

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();

edited Jul 19 '14 at 16:07

Brad Larson

168,330
45
388
563

answered Jun 16 '10 at 22:57

Ian Mackinnon

11,717
10
48
62

1

Got to agree with @MildFuzz here - this is an awesome solution! – Johannes Pille Oct 16 '12 at 15:27
Someone care to edit and explain what this actually does? (I've started here http://api.jquery.com/detach) – C. Tewalt Feb 10 '16 at 03:08
Oh, I see now. He inserts a placeholder in the DOM where the input is. uses the detach to remove the input, but still keeps the element info. Changes the type attribute to have the value 'text'. inserts after the placeholder, then removes the place holder... Ha. slick. – C. Tewalt Feb 10 '16 at 03:16

Aram Verstegen · Answer 2 · 2009-02-12T12:21:16.840

13

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.

edited Feb 12 '09 at 12:21

answered Feb 12 '09 at 11:11

Aram Verstegen

2,327
1
16
15

1

This is a good point for accessibility reasons. You shouldn't use a hidden input except for ancillary fields that are not intended for user input. – Andrew Vit Feb 12 '09 at 14:47
It makes sense to transform a text input to a hidden input when the value is known ahead of time. In my case, it should be a text field when I want the visitor to enter his own OpenID value, but I want the type to change to a hidden field when the visitor selects a Google, Yahoo, or Facebook authentication provider, because those urls are pre-determined, and shouldn't really be changed by the visitor. There are times when you may want a hidden label or div to hold data, but I don't think this is one of them. – TARKUS May 21 '13 at 13:06

score 8 · Answer 3 · answered Feb 12 '09 at 11:38

8

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.

answered Feb 12 '09 at 11:38

meouw

40,162
10
48
67

3

While this is mostly true, Ian Mackinnon posted a solution below that worked for me. As of jQuery 1.4, you can change the input type _if_ it is detached. – kingjeffrey Nov 12 '10 at 22:18

score 8 · Answer 4 · answered Feb 18 '09 at 06:37

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...

score 2 · Answer 5 · edited Mar 25 '15 at 11:14

2

easy man...

$('input[type="hidden"]').each (function() { this.type = 'text'; });

Trigger it on a event

edited Mar 25 '15 at 11:14

Ell Neal

5,844
2
27
54

answered Mar 23 '10 at 10:01

ab.

59
1

score 0 · Answer 6 · answered Sep 03 '10 at 02:51

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");

score 0 · Answer 7 · answered Feb 04 '11 at 00:09

Old thread, but I recently needed to do something similar but with file fields and clearing them... I think the same solution could apply, but at least you can grab the contents in this case.

var temp = $('#hidden-field').val();
$("#container-for-field").html("<input id='not-hidden' type='text' value='"+temp+"'/>");

That should also solve the problem :).

jQuery: Change element type from hidden to input

7 Answers7

Linked