Jquery - 显示/隐藏隐藏的输入表单字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17827133/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery - Show/Hide a hidden input form field
提问by Joel G Mathew
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.
我是 Javascript 的新手，并试图更好地理解它。我有一个由 php 生成的表单，使用来自 POST 的数据。该表单有一些隐藏的表单字段，这些字段应该在验证后填充值。
The relevant html code:
相关的html代码：
<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:
Javascript代码：
$(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.
<input>当前一个字段的焦点丢失时，我试图让第二个字段“隐藏”。该函数被执行，并显示警报。
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?
所以这个值是传播的，所以我确实正确地处理了这个对象。为什么不显示？
回答by Jacob Oettinger
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.
我认为您想要做的是使用文本类型的普通输入字段并使用 css 隐藏它。然后您就可以像现在一样使用 jQuery 来展示它。
It should work if you replace your hidden field with:
如果您将隐藏字段替换为：
<input type="text" name="CONF_FILE" value="" id="ConfFile" style="display:none">
回答by adeneo
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:
usingshow()仅将 display 属性设置为可见的内容，但由于输入具有隐藏类型，它仍然不会显示，您必须实际更改类型：
$(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');
});
});
回答by Neeraj Dubey
As per your code input typeis hidden and same is not shown even doing showforcefully as hiddenhave property to hide existence of control.So you need to change your input type.
根据您的代码input type是隐藏的，即使show强制执行hidden具有隐藏控件存在的属性也不会显示相同的内容。因此您需要更改您的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;">
回答by Thanh Khánh
You should change attribute from hiddento textbefore showing:
您应该在显示之前将属性从 更改hidden为text：
ConfFile.attr('type', 'text');
ConfFile.show();
回答by Dinesh Chaudhary
use code for hide
使用代码隐藏
$(document).ready(function () {
$('#ConfFile').hide();$('#ConfFile').show();
});
