如何使web表单在上一个web表单中输入数据后显示

How to make web form appear after previous web form has data entered into it?

本文关键字：表单 web 数据 显示 输入 上一个 何使      更新时间：2023-09-26

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

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持开放态度，如果有任何方法可以使第二种形式对外观产生影响，那将是非常棒的。

-Adam

display属性接受多个值，但true和false不在其中。要获取完整列表，请访问MDN、w3schools或MSDN。但我现在可以告诉你，你最可能想要的值是"无"answers"块"，如 
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！=''到您的代码。此外，最好使用！==而不是！=。

：）

相关文章：