Show hide forms using buttons and JavaScript

Question

I need to show a form using a button  and hide it when the user presses another button  because the other button shows another form  I did a similar thing with a select box  but I can t figure out how to do this

User · Answer

There s something I bet you already heard about this  It s called jQuery       button1   click function             form1   show         It s really easy and you can use CSS-like selectors and you can add animations  It s really easy to learn

User · Answer

Would you want the same form with different parts  showing each part accordingly with a button   Here an example with three steps  that is  three form parts  but it is expandable to any number of form parts  The HTML characters  amp laquo  and  amp raquo  just print respectively  laquo  and  raquo  which might be interesting for the previous and next button characters    x000D   x000D  shows form part 1  x000D   x000D     this function shows form part  n  and hides the remaining form parts    x000D  function shows form part n   x000D    var i   1  p   document getElementById  form part  1   x000D    while  p     null   x000D      if  i     n   x000D        p style display       x000D        x000D      else  x000D        p style display    none   x000D        x000D      i    x000D      p   document getElementById  form part  i   x000D      x000D    x000D   x000D     this is called at the last step using info filled during the previous steps   x000D  function calc sum     x000D    var sum   x000D      parseInt document getElementById  num1   value    x000D      parseInt document getElementById  num2   value    x000D      parseInt document getElementById  num3   value   x000D   x000D    alert  The sum is      sum   x000D    x000D   lt div id  form part1  gt  x000D    Part 1 lt br gt  x000D     lt input type  number  value  1  id  num1  gt  lt br gt  x000D     lt button type  button  onclick  shows form part 2   gt  amp raquo  lt  button gt  x000D   lt  div gt  x000D   x000D   lt div id  form part2  gt  x000D    Part 2 lt br gt  x000D     lt input type  number  value  2  id  num2  gt  lt br gt  x000D     lt button type  button  onclick  shows form part 1   gt  amp laquo  lt  button gt  x000D     lt button type  button  onclick  shows form part 3   gt  amp raquo  lt  button gt  x000D   lt  div gt  x000D   x000D   lt div id  form part3  gt  x000D    Part 3 lt br gt  x000D     lt input type  number  value  3  id  num3  gt  lt br gt  x000D     lt button type  button  onclick  shows form part 2   gt  amp laquo  lt  button gt  x000D     lt button type  button  onclick  calc sum    gt Sum lt  button gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

There s the global attribute called hidden  But I m green to all this and maybe there was a reason it wasn t mentioned yet    x000D   x000D  var someCondition   true  x000D   x000D  if  someCondition    true   x000D      document getElementById  hidden div   hidden   false  x000D    x000D   lt div id  hidden div  hidden gt  x000D      stuff hidden by default x000D   lt  div gt  x000D   x000D   x000D    https   developer mozilla org en-US docs Web API HTMLElement hidden

User · Answer

Use the following code fragment to hide the form on button click   document getElementById  your form id   style display  none     And the following code to display it   document getElementById  your form id   style display  block     Or you can use the same function for both purposes   function asd a        if a  1          document getElementById  asd   style display  none       else         document getElementById  asd   style display  block       And the HTML    lt form id  asd  gt form  lt  form gt   lt button onclick  asd 1   gt Hide lt  button gt   lt button onclick  asd 2   gt Show lt  button gt

User · Answer

If you have a container and two sub containers  you can do like this  jQuery          previousbutton   click function             form sub container1   show            form sub container2   hide                nextbutton   click function             form container   find   hidden   show   next            form sub container1   hide         HTML        lt div id  form container  gt               lt div id  form sub container1  style  display  block   gt               lt  div gt                lt div id  form sub container2  style  display  none   gt               lt  div gt        lt  div gt

[javascript] Show/hide forms using buttons and JavaScript

Examples related to javascript

Examples related to html