CODEWITHSUNDEEP
javascriptjqueryhtmlcssforms
Luke G
Luke G

Reputation: 79

Hidden form displays empty area

I would like to hide a form within a button. Hiding the form is done but the problem is that the hidden forms area size is displayed as an empty area under my box so I have a big space between the bottom of the button and content below the button e.g. another button.

Button Code

<button class="myButtonl" onclick='showForm();'>Create a Player</button>

Form Code

<div id="div1" style="visibility:hidden;">
    <form action="team.php" method="POST" name="profiles">
        <div>Team Name: <input type="text" name="psn" value=""></div>
        <input type="submit">
    </form>
</div>

Javascript

<script>
    function showForm() { 
        document.getElementById('div1').style.visibility= 'visible' ;
    }
</script>

I guess the effect i am looking for is that the button holds the form inside of it until the button has been clicked and then the form drops down to be displayed below it. Also if it is possible that if the button is clicked again while the form is showing that the form is put back inside of the button so it is not visible any more until it is clicked again.

Upvotes: 0

Views: 108

Answers (4)

Petar Vasilev
Petar Vasilev

Reputation: 4735

correct html:

<div id="div1" style="display:none;">
    <form action="team.php" method="POST" name="profiles">
        <div>Team Name: <input type="text" name="psn" value=""></div>
        <input type="submit">
    </form>
</div>

and javascript:

function showForm() { 
    document.getElementById('div1').style.display = 'block' ;
}

EDIT: note that you need to use the 'display' property rather than the 'visibility'

Upvotes: 4

Praveen Govind
Praveen Govind

Reputation: 5627

Instead of style="visibility:hidden;" use display:none;

display:none removes the element from the normal flow of the page, allowing other elements to fill in.
visibility:hidden leaves the element in the normal flow of the page such that is still occupies space.

<div id="div1" style="display:none;">
   <form action="team.php" method="POST" name="profiles">
       <div>Team Name: <input type="text" name="psn" value=""></div>
        <input type="submit">
   </form>
</div>

<script>
  function showForm() { 
     document.getElementById('div1').style.display= 'block' ;
  }
</script>

Upvotes: 2

P.Sethuraman
P.Sethuraman

Reputation: 715

Use Toggle Option in jquery

HTML

     <button class="myButtonl" onclick='showForm();'>Create a Player</button>

<div id="div1" style="display:none;">
    <form action="team.php" method="POST" name="profiles">
        <div>Team Name: <input type="text" name="psn" value=""></div>
        <input type="submit">
    </form>
</div>

Jquery

function showForm() { 
   $('#div1').toggle();
}

Demo FIDDLE

Upvotes: 2

Skymt
Skymt

Reputation: 1089

You should use the css property "display", instead of "visibility". See CSS Properties: Display vs. Visibility

Upvotes: 0

Related Questions