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.

Everyone is going to ask you what you've tried already because nobody here wants to do your work from scratch. It makes us feel all warm and fuzzy inside when we see that you have tried at least as hard as we have in providing you with an answer. — MultiDev
– MultiDev, Commented Jun 27, 2012 at 12:45
Nice one... I tried writing a Javascript function similiar to the one with the select box thingy, but I don't know how to do it. — Marko Mijailovic
– Marko Mijailovic, Commented Jun 27, 2012 at 12:45
@antyrat: -10 for linking to your own site that kills the back button functionality! ;) — Limey
– Limey, Commented Jun 27, 2012 at 12:56

Peter Mortensen · Accepted Answer · 2019-07-05 21:45:14Z

37

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:

<form id="asd">form </form>
<button onclick="asd(1)">Hide</button>
<button onclick="asd(2)">Show</button>

edited Jul 5, 2019 at 21:45

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jun 27, 2012 at 12:45

Neji

6,8875 gold badges45 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Fabio Poloni Over a year ago

I'd use jQuery instead. Everything else became to unsecure to me.

Limey Over a year ago

Can you do that on the form level, or do you need to wrap your form in a div?

Neji Over a year ago

yeah but it answers his question in simple js right!! if the answer is wrong then downvote it else there seems no reason why it wont answer the question.

Neji Over a year ago

there is no problem to do it form level

Peter Mortensen Over a year ago

Aren't the two button elements required to be inside the form HTML element? Is it well-formed HTML?

Peter Mortensen · Accepted Answer · 2019-07-05 21:50:43Z

5

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.

edited Jul 5, 2019 at 21:50

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jun 27, 2012 at 12:46

Fabio Poloni

8,3815 gold badges46 silver badges74 bronze badges

3 Comments

Teneff Over a year ago

-1 Really, you would load the whole library for this simple functionality

Fabio Poloni Over a year ago

You're allways going to use jQuery.

Danny Over a year ago

+1 as I'm sure he has other things going on in his web application that could make use of JQuery.

usercode · Accepted Answer · 2013-07-08 08:34:14Z

2

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

     <div id="form_container">
            <div id="form_sub_container1" style="display: block;">
            </div>

            <div id="form_sub_container2" style="display: none;">
            </div>
     </div>

answered Jul 8, 2013 at 8:34

usercode

3091 gold badge4 silver badges20 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2019-07-05 21:52:56Z

0

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?

var someCondition = true;

if (someCondition == true){
    document.getElementById('hidden div').hidden = false;
}

<div id="hidden div" hidden>
    stuff hidden by default
</div>

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden

edited Jul 5, 2019 at 21:52

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Apr 2, 2019 at 7:30

Dmonk

316 bronze badges

1 Comment

Display name Over a year ago

not sure why this was downvoted, it worked like a charm

João Pimentel Ferreira · Accepted Answer · 2019-07-07 20:22:03Z

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 « and » just print respectively « and » which might be interesting for the previous and next button characters.

shows_form_part(1)

/* this function shows form part [n] and hides the remaining form parts */
function shows_form_part(n){
  var i = 1, p = document.getElementById("form_part"+1);
  while (p !== null){
    if (i === n){
      p.style.display = "";
    }
    else{
      p.style.display = "none";
    }
    i++;
    p = document.getElementById("form_part"+i);
  }
}

/* this is called at the last step using info filled during the previous steps*/
function calc_sum() {
  var sum =
    parseInt(document.getElementById("num1").value) +
    parseInt(document.getElementById("num2").value) +
    parseInt(document.getElementById("num3").value);

  alert("The sum is: " + sum);
}

<div id="form_part1">
  Part 1<br>
  <input type="number" value="1" id="num1"><br>
  <button type="button" onclick="shows_form_part(2)">&raquo;</button>
</div>

<div id="form_part2">
  Part 2<br>
  <input type="number" value="2" id="num2"><br>
  <button type="button" onclick="shows_form_part(1)">&laquo;</button>
  <button type="button" onclick="shows_form_part(3)">&raquo;</button>
</div>

<div id="form_part3">
  Part 3<br>
  <input type="number" value="3" id="num3"><br>
  <button type="button" onclick="shows_form_part(2)">&laquo;</button>
  <button type="button" onclick="calc_sum()">Sum</button>
</div>

Collectives™ on Stack Overflow

Show/hide forms using buttons and JavaScript

5 Answers 5

5 Comments

3 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related