Change from hidden to textbox. What's wrong in my code?

Question

I have a form with some fields of type text and 2 fields (name and second name) that have a value by default, and these 2 fields are of type="hidden".

Now, I would like to add a link on the form "Fill an order for another person". If the user click on this link the fields name and second name must be of type text to allow the user enter a name/second name. I tried to use jQuery to remove the existing hidden field, and create a new textbox in it's place, with the same value as the hidden one.

Here is an example of what I want: http://jsfiddle.net/FT2B3/1/

Can you tell me whats wrong? Thanks in advance.

(...)
if ($field_label=="First name")
{
return sprintf("<div class='ginput_container'>$fname<input name='n1' id='$fname1' type='hidden' value='$fname' class='ginput_container/></div>");

?>
   <script type="text/javascript">

   $(function(){

        $('#nform').click(function() 
    {

    $nbox1 = $("<div class='ginput_container'><input id='$fn1' type='text' class='ginput_container'/></div>").val($('#fname1').val());

           $('#fname1').after($nbox1).remove();

    });
});
</script>
<a href="#" id="nform">Link</a>
<?php
}
(...)

score 3 · Accepted Answer · answered Oct 30 '11 at 22:49

3

How about this?

HTML:

<input id="hiddenname" type="hidden" value="secret value" /><br />
<a href="#" id="showLink">Show me the hidden field!</a>

Javascript:

$(function() {
    $('#showLink').click(function() {
        $('#hiddenname').prop('type', 'text');
    });
});

answered Oct 30 '11 at 22:49

Emre Erkan

8,433
3
48
53

Also, possible to make initial input field as and later in javascript just call $("#hiddenname").show(); – Milan Jaric Oct 30 '11 at 22:55
2

Does changing the `type` work in all browsers? I have an idea IE doesn't support it. (Or maybe that was just older versions of IE.) (Or maybe I'm confusing it with something else.) – nnnnnn Oct 30 '11 at 23:05
@nnnnnn you're right. Older versions of IE [doesn't support](http://stackoverflow.com/questions/2566394/changing-the-input-type-in-ie-with-javascript) this method. – Emre Erkan Oct 30 '11 at 23:13

score 0 · Answer 2 · answered Oct 30 '11 at 23:17

Because a div element is wrapping input element when you try to set value with .val() jQuery tries to set value to that div element. You can set the value while you create the input field like this;

$nbox1 = $("<div class='ginput_container'><input id='$fn1' type='text' class='ginput_container' value='" + $('#fname1').val() + "' /></div>");

Change from hidden to textbox. What's wrong in my code?

2 Answers2