Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery: Change element type from hidden to input

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

like image 632
Tom Avatar asked Feb 12 '09 11:02

Tom


People also ask

How to set input type hidden in jQuery?

JQuery is the library that makes the use of JavaScript easy. Inserting the <input type='hidden'> can also be done using jQuery. The append() and appendTo() inbuilt function can be used to add the hidden form element but they are not only limited to the <input type='hidden'> but we can also add other html elements.

How to detect value change on hidden input field in jQuery?

You can simply use the below function, You can also change the type element. $("input[type=hidden]"). bind("change", function() { alert($(this). val()); });

Why use input type hidden?

Definition and Usage. The <input type="hidden"> defines a hidden input field. A hidden field let web developers include data that cannot be seen or modified by users when a form is submitted. A hidden field often stores what database record that needs to be updated when the form is submitted.


5 Answers

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();
like image 167
Ian Mackinnon Avatar answered Oct 19 '22 20:10

Ian Mackinnon


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.

like image 25
Aram Verstegen Avatar answered Oct 19 '22 21:10

Aram Verstegen


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.

like image 8
meouw Avatar answered Oct 19 '22 20:10

meouw


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...
like image 8
artlung Avatar answered Oct 19 '22 22:10

artlung


easy man...

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

Trigger it on a event

like image 2
ab. Avatar answered Oct 19 '22 21:10

ab.