在先前的Web表单中输入数据后，如何使Web表单出现？

Question

我希望在第一个Web表单中输入某些内容后使第二个Web表单出现。 我目前正在使用设置为slim作为模板引擎和纯javascript的sinatra。

input#topic value="Enter topic" onfocus="this.value = this.value=='Enter topic'?'':this.value;" onblur="this.value = this.value==''?'Enter topic':this.value;"

input#subtopic value="Enter subtopic" onfocus="this.value = this.value=='Enter subtopic?'':this.value;" onblur="this.value = this.value==''?'Enter subtopic':this.value;"

上面是我的两个表单，onfocus和onblur是使表单值消失并在单击时重新出现。

我的JavaScript如下。

function checkField(field) {
    if(field.value != null) {
        document.getElementById('subtopic_form').style.display = 'true';
    } else {
        document.getElementById('subtopic_form').style.display = 'false';
    }
}

这是行不通的，部分问题是当我添加到输入标签时

onchange="checkField(this)"

那么即使我在home.slim文件中已指定，我的javascript文件中也会收到未使用函数的消息

script src="/js/application.js"

非常感谢您为我提供帮助，使其能够正常工作。 我愿意为此使用jquery，如果有任何方法可以使第二种形式对外观产生影响，那就太好了。

-亚当

Answer 1

display属性接受几个值，但是true和false不在其中。 要获取完整列表，请访问MDN或w3schools或MSDN 。 但是我现在可以告诉您，您最可能想要的值是“ none”和“ block”，例如：

function checkField(field) {
    if(field.value != null && field.value != '') {
        document.getElementById('subtopic_form').style.display = 'block';
    } else {
        document.getElementById('subtopic_form').style.display = 'none';
    }
}

但是，使用jQuery，此代码可能会更干净！

function checkField(field) {
    if (field.value != null && field.value != '') {
        $("#subtopic_form").show();
    } else {
        $("#subtopic_form").hide();
    }
}

甚至

$("#topic").change(function(){
    if ($(this).val()) {
        $("#subtopic_form").show();
    } else {
        $("#subtopic_form").hide();
    }
});

如果需要效果，请考虑使用jQuery的.fadeOut（）或.slideUp（）代替.hide （）

请注意，我在您的代码中添加了field.value！=”。 另外，最好使用！==代替！=。

:)