在先前的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！=”。 另外，最好使用！==代替！=。

:)