Jquery - 显示/隐藏隐藏的输入表单字段

Question

我是 Javascript 新手，并试图更好地理解它。我有一个由 php 生成的表单，使用来自 POST 的数据。表单有一些隐藏的表单字段，应该在验证后填充值。

相关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 代码：

$(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();
    });
});

当前一个字段的焦点丢失时，我试图让第二个 <input> 字段“未隐藏”。该函数被执行，并显示警报。

在查看来源时，我可以看到它显示：

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

所以这个值被传播了，所以我确实正确地处理了这个对象。为什么不显示？

Answer 1

使用隐藏代码

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

Answer 2

隐藏的输入字段应该保持隐藏状态。

我认为您想要做的是使用文本类型的普通输入字段并使用 css 将其隐藏。然后你就可以像现在这样使用 jQuery 来展示它了。

如果您将隐藏字段替换为以下内容，它应该可以工作：

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

Answer 3

根据您的代码 input type 是隐藏的，即使强制执行 show 也不会显示相同的代码，因为 hidden 具有隐藏控件存在的属性。所以您需要更改您的 input type。

你可以替换你隐藏的

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

到

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

或

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

Answer 4

使用show() 只会将显示属性设置为可见，但由于输入的类型为隐藏，它仍然不会显示，您必须实际更改类型：

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

Answer 5

您应该在显示之前将属性从hidden 更改为text：

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