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

Question

I'm looking to make a second web form appear after the first web form has something entered into it. I'm currently using a sinatra set up with slim as the templating engine, and pure 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;"

The above are my two forms, the onfocus and onblur are to make the form value disappear and reappear if clicked on.

My javascript is as follows.

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

This doesn't work, and part of the problem is that when I add to the input tags

onchange="checkField(this)"

then I get a function unused message inside my javascript file, even though I have specified in my home.slim file

script src="/js/application.js"

Any help to get this to work as I need is much appreciated. I'm open to using jquery for this, and if there was any way to make the second form have an effect upon appearance that'd be awesome.

-Adam

Answer 1

The display property accepts several values, but true and false are not among them. To get a full list, go to MDN or w3schools or MSDN . But I can tell you right now, that the values you most likely want are "none" and "block", as in:

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

with jQuery, though, this code could be quite a bit cleaner!

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

or even

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

and if you want effects, consider jQuery's .fadeOut() or .slideUp() in place of .hide()

Note that I added field.value != '' to your code. Also, it would be best to use !== instead of !=.

:)