CODEWITHSUNDEEP
javascriptjqueryformsshow-hide
Joel G Mathew
Joel G Mathew

Reputation: 8061

Jquery - Show/Hide a hidden input form field

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?

Upvotes: 5

Views: 59627

Answers (5)

Dinesh Chaudhary
Dinesh Chaudhary

Reputation: 1

use code for hide

$(document).ready(function () {
$('#ConfFile').hide();$('#ConfFile').show();
});

Upvotes: -1

Jacob Oettinger
Jacob Oettinger

Reputation: 766

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

Upvotes: 12

Neeraj
Neeraj

Reputation: 4489

As per your code input type is hidden and same is not shown even doing show forcefully as hidden have property to hide existence of control.So you need to change your input type.

You can replace your hidden 

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

to

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

or 

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

Upvotes: 1

adeneo
adeneo

Reputation: 318182

using show() only sets the display property to something visible, but as the input has a type of hidden, it still won't show, you have to actually change the type for that:

$(document).ready (function() {
    $('#DomainField').on('blur', function() {
        var DomField = $("#DomainField");
        var DomText  = DomField.val();     
        var fold     = "/var/lib/bind/db.";
        var ConfFile = $("#ConfFile");
        ConfFile.val(fold+DomText).prop('type','text');
    });
});

Upvotes: 2

Thanh Kh&#225;nh
Thanh Kh&#225;nh

Reputation: 641

You should change attribute from hidden to text before showing:

 ConfFile.attr('type', 'text');
 ConfFile.show();

Upvotes: 0

Related Questions