CODEWITHSUNDEEP
phpjavascriptjquery
user1013984
user1013984

Reputation: 53

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

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
}
(...)

Upvotes: 0

Views: 181

Answers (2)

Emre Erkan
Emre Erkan

Reputation: 8482

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

Upvotes: 0

Emre Erkan
Emre Erkan

Reputation: 8482

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');
    });
});

Upvotes: 3

Related Questions