CODEWITHSUNDEEP
javascripthtmlcss
vgupta22
vgupta22

Reputation: 60

How to make a form hide

I'm making something that can calculate the volume and area of the input values. The problem i'm having is that I don't want both of them to display at the same time. It will show the volume function first, and then whenever the calculate area of an object button is clicked, it should show the area finder, but they both display at the same time. How do I make them appear separately? heres the JS fiddle;http://jsfiddle.net/xVSfF/

   <html>
    <head>
     <script>
      function volumeFields(){

     document.getElementById("idLengthVolume");
     document.getElementById("idWidthVolume");
    document.getElementById("idHeightVolume");   
    document.getElementById("calcVolume");
}

 function computeVolume(){
    var x=document.getElementById("idLengthVolume").value;
    var y=document.getElementById("idWidthVolume").value;
    var z=document.getElementById("idHeightVolume").value;
    var sVolume="The volume of your object is " + x * y * z +" cubic " + volumeUnits.value;
    document.getElementById("idOutputVolume").innerHTML=sVolume;   
    document.getElementById("idVolumeReCompute");
    document.getElementById("idAreaCompute");
}
function areaFields(){

    document.getElementById("idLengthArea");
    document.getElementById("idWidthArea");
    document.getElementById("calcArea");
}
 function computeArea(){
    var x=document.getElementById("idLengthArea").value;
    var y=document.getElementById("idWidthArea").value;
    var sArea="The area of your object is " + x * y +" square " + areaUnits.value; 
    document.getElementById("idOutputArea").innerHTML=sVolume;
    document.getElementById("idAreaRecompute");
    document.getElementById("idVolumeCompute");
}

 </script>
    </head>
    <body onload="volumeFields()">
       <form action="units">
   Insert the length of your object:<input type="text" size="20" id="idLengthVolume" />
        <select name="" id="volumeUnits">
            <option value="centimeters">cm</option>
            <option value="inches">in</option>
            <option value="feet" selected>ft</option>
            <option value="miles">mi</option>
        </select><br/>
    Insert the width of your object:<input type="text" size="20" id="idWidthVolume" />
        <select name="">
            <option value="centimeters">cm</option>
            <option value="inches">in</option>
            <option value="feet" selected>ft</option>
            <option value="miles">mi</option>
        </select><br/>
    Insert the height of your object:<input type="text" size="20" id="idHeightVolume" />
        <select name="">
            <option value="centimeters">cm</option>
            <option value="inches">in</option>
            <option value="feet" selected>ft</option>
            <option value="miles">mi</option>
        </select>
    </form>
<input type="button" style="display:block" onclick="computeVolume()" value="Calculate"     id="calcVolume"/>
      <div id='idOutputVolume'></div>
    <button type="button" style="display:block;" onclick="volumeFields()"   id="idVolumeReCompute">Do another calculation</button>
    <button type="button" style="display:block;" onclick="areaFields()" id="idAreaCompute">calculate the area of an object</button>
    <form action="units">
       Insert the length of your object:<input type="text" size="20" id="idLengthArea" />
        <select name="" id="areaUnits">
            <option value="centimeters">cm</option>
            <option value="inches">in</option>
            <option value="feet" selected>ft</option>
            <option value="miles">mi</option>
        </select><br/>
    Insert the width of your object:<input type="text" size="20" id="idWidthArea" />
        <select name="">
            <option value="centimeters">cm</option>
            <option value="inches">in</option>
            <option value="feet" selected>ft</option>
            <option value="miles">mi</option>
        </select>
        <input type="button" style="display:block" onclick="computeArea()" value="Calculate" id="calcArea"/>
    </form>  
    <div id='idOutputArea'></div>
    <button type="button" style="display:block;" onclick="areaFields()" id="idAreaRecompute">Do another calculation</button>
    <button type="button" style="display:block;" onclick="volumeFields()" id="idVolumeCompute">calculate the volume of an object</button>
    </body>
    </html>

Upvotes: 0

Views: 93

Answers (1)

luisZavaleta
luisZavaleta

Reputation: 1168

You can hide thing in two ways (and probably many others, but let's focus in two):

1.-css property visibility: you can use : style="visibility:hidden" and the element "disappears" (but still using space, so may see a "empty" space) (to make the element visible use visibility:visible)

2.-css property display: you can use : display:none : the element disappears as well but wont use any space (to make it visible change to other kind for display for example: display:block)

You can make this element by element or put all groups of elements in a div an use this properties in the div.

To change a css property dynamically check this link.. http://www.w3schools.com/js/js_htmldom_css.asp

I also think that you should use jQuery for this kind a of things, it make it a little bit more easy and more important, you don't have worry (too much) for cross browsing incompatibilities.

Upvotes: 1

Related Questions