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


i'm looking make second web form appear after first web form has entered it. i'm using sinatra set slim templating engine, , 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 2 forms, onfocus , onblur make form value disappear , reappear if clicked on.

my javascript 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, , part of problem when add input tags

onchange="checkfield(this)" 

then function unused message inside javascript file, though have specified in home.slim file

script src="/js/application.js" 

any work need appreciated. i'm open using jquery this, , if there way make second form have effect upon appearance that'd awesome.

-adam

the display property accepts several values, true , false not among them. full list, go mdn or w3schools or msdn. can tell right now, values want "none" , "block", 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, code quite bit cleaner!

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

or

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

and if want effects, consider jquery's .fadeout() or .slideup() in place of .hide()

note added field.value != '' code. also, best use !== instead of !=.

:)


Popular posts from this blog

php - How should I create my API for mobile applications (Needs Authentication) -

5 Reasons to Blog Anonymously (and 5 Reasons Not To)

Google AdWords and AdSense - A Dynamic Small Business Marketing Duo