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

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

我认为你想要做的是使用文本类型的普通输入字段并使用css隐藏它。然后你就可以按照现在的方式使用jQuery来显示它。

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

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

Answer 2

使用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 3

根据您的代码input type被隐藏，即使show强行执行hidden也没有显示相同内容，因为input type具有隐藏控件存在的属性。所以您需要更改{{1} }}

您可以替换隐藏的

<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

在显示：

之前，您应该将属性从hidden更改为text

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

Answer 5

使用隐藏代码

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

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

5 个答案: