Jquery - Show/Hide a hidden input form field

Question

I'm new to Javascript and trying to understand it better. I have a form which is generated by php, using data from POST. The form has some hidden form fields, which are supposed to be populated with values after validation.

The relevant html code:

<form action="" method="post" name="FormProcessor">
<b>Domain Name: </b>
<input type="text" name="MAIN_DOMAINNAME" value="" id="DomainField">
<input type="hidden" name="CONF_FILE" value="" id="ConfFile">
<div id="infomsg">

Javascript code:

$(document).ready (function()
{
    $('#DomainField').blur(function() {
        var DomField=$("#DomainField");
        var DomText=DomField.val();     
        var fold="/var/lib/bind/db.";
        alert(fold+DomText);
        var ConfFile=$("#ConfFile");
        ConfFile.val(fold+DomText);
        ConfFile.show();
    });
});

I'm trying to get the second <input> field to be 'unhidden' when the focus of the previous field is lost. The function gets executed, and the alert is shown.

On checking the source, I can see that it shows:

<input type="hidden" id="ConfFile" value="/var/lib/bind/db.g.com" name="CONF_FILE" style="display: inline;">

So the value is propogated, so I did address the object properly. Why isnt it becoming shown?

Answer 1

A hidden input field is supposed to remain hidden.

What I think you want to do is use a normal input field of the type text and hide it using css. Then you are able to show it using jQuery the way you are doing it now.

It should work if you replace your hidden field with:

<input type="text" name="CONF_FILE" value="" id="ConfFile" style="display:none">