document getElementById test style display hidden not working

Question

I want to hide my form when I click on the submit button  My code is as follows    lt script type  text javascript  gt      function hide             document getElementById  test   style display    hidden          lt  script gt   lt form method  post  id  test  gt       lt table width  60   border  0  cellspacing  2  cellpadding  2  gt           lt tr style  background url    images nav png  repeat-x  color  fff  font-weight bold          align  center  gt               lt td gt Ample Id lt  td gt               lt td gt Find lt  td gt           lt  tr gt           lt tr align  center  bgcolor   E8F8FF  style  color  006  gt               lt td gt                   lt input type  text  name  ampid  id  ampid  value   lt  php echo   POST  ampid     gt                     gt               lt  td gt               lt td gt                   lt input type  image  src     images btnFind png  id  find  name  find                  onclick  javascript hide       gt               lt  td gt           lt  tr gt       lt  table gt   lt  form gt    But when I click on the  Find  button  that particular form is not being hidden

User · Answer

Set CSS display property to none   document getElementById  test   style display    none     Also  you do not need javascript  for the onclick attribute    lt input type  image  src     images btnFind png  id  find  name  find       onclick  hide       gt    Finally  make sure you do not have multiple elements with the same ID   If your form goes nowhere  Phil suggested that you should prevent submission of the form  Simply return false in the onsubmit handler    lt form method  post  id  test  onsubmit  return false   gt    If you want the form to post  but hide the div on subsequent page load  you will have to use server-side code to hide the element    lt script type  text javascript  gt  function hide         document getElementById  test   style display    none     window onload   function            if form was submitted  PHP will print the below             which runs function hide   on page load      lt       POST  ampid             hide            gt     lt  script gt

User · Answer

Using jQuery          test   hide      Using Javascript   document getElementById  test   style display  none     Threw an error  Cannot set property  display  of undefined   So  fix for this would be   document getElementById  test   style  display none     where your html code will look like this    lt div style  display inline-block  id  test  gt  lt  div gt

User · Answer

It should be either   document getElementById  test   style display    none     or   document getElementById  test   style visibility    hidden     Second option will display some blank space where the form was initially present   where as the first option doesn t

User · Answer

you can use something like this    div container   lt script type  text javascript  gt  function hide    document getElementById  test   innerHTML style display  none      lt  script gt   lt div id  test  gt   lt form method  post   gt    lt table width  60   border  0  cellspacing  2  cellpadding  2    gt     lt tr style  background url    images nav png  repeat-x  color  fff  font-weight bold  align  center  gt       lt td gt Ample Id lt  td gt       lt td gt Find lt  td gt     lt  tr gt      lt tr align  center  bgcolor   E8F8FF  style  color  006   gt       lt td gt  lt input type  text  name  ampid  id  ampid  value   lt  php echo   POST  ampid     gt     gt  lt  td gt      lt td gt  lt input type  image  src     images btnFind png  id  find  name  find  onclick  javascript hide      gt  lt  td gt      lt  tr gt    lt  table gt    lt  form gt   lt  div gt

User · Answer

this should be it try it   document getElementById  test   style display  none

User · Answer

Through JavaScript  document getElementById  test   style display  none     Through Jquery      test   hide

User · Answer

its a block element  and you need to use none  document getElementById  test   style display  none    hidden is used for visibility

User · Answer

There are two ways of doing this   Most of the answers have correctly pointed out that style display has no value called  hidden   It should be none   If you want to use  hidden  the syntax should be as follows   object style visibility  hidden    The difference between the two is the visibility  hidden  property will only hide the contents of you  element but retain it position on the page  Whereas the display   none  will hide your complete element and the rest of the elements on the page will fill that void created by it   Check this illustration

User · Answer

Replace hidden with none  See MDN reference

User · Answer

Maybe you can add a class like  hide    Follow the example here   https   developer mozilla org fr docs Web API Element classList      document getElementById  test   classList add  anotherclass

User · Answer

you need to use display   none  value hidden is connected with attributet called visibility  so your code should look like this   lt script type  text javascript  gt  function hide    document getElementById  test   style display  none      lt  script gt

[javascript] document.getElementById("test").style.display="hidden" not working

Examples related to javascript

Examples related to html