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

因此，值被传递了，所以我正确地处理了对象。为什么它没有显示？

- Joel G Mathew

Answer 1

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

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

如果您用以下内容代替您的隐藏字段，则应该可以正常工作：

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

- Jacob Oettinger

---

我不应该将它设置为 type="text" 吗？ - Joel G Mathew

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

- adeneo

---

@Droidzone - дҪ еҝ…йЎ»дҪҝз”Ёprop()жқҘжӣҙж”№еұһжҖ§пјҢattr()еңЁиҝҷз§Қжғ…еҶөдёӢдёҚиө·дҪңз”ЁгҖӮ - adeneo

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

or

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

- Neeraj Dubey

---

可以使用input type text/label，根据需要很容易地隐藏和显示它们。.attr()是控制属性，根据我的最后一条评论，hidden没有显示的属性，因此无需添加.attr()。希望现在清楚了。 - Neeraj Dubey

谢谢澄清。这是一个优雅的解决方案。我尝试使用.css("display", "block");来隐藏/显示包含多个元素的整个<div>块。 - Joel G Mathew

Answer 4

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

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

- Thanh Khánh

---

将代码中的隐藏文本替换为文本： <input type="text" name="CONF_FILE" value="" id="ConfFile" style="display:none"> - Thanh Khánh

Answer 5

使用代码隐藏

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

- Dinesh Chaudhary