如何在之前的 web 表单输入数据后显示 web 表单？答案

【问题标题】：How to make web form appear after previous web form has data entered into it?如何在之前的 web 表单输入数据后显示 web 表单？
【发布时间】：2013-08-20 18:24:40
【问题描述】：

我希望在第一个 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)"

然后我在我的 javascript 文件中得到一个函数未使用的消息，即使我已经在我的 home.slim 文件中指定了

script src="/js/application.js"

非常感谢任何帮助我根据需要使其工作的帮助。我愿意为此使用 jquery，如果有任何方法可以使第二种形式对外观产生影响，那就太棒了。

-亚当

【问题讨论】：

标签： javascript css ruby sinatra slim-lang

【解决方案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 != ''。此外，最好使用 !== 而不是 !=。

【讨论】：