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 !=.
:)