Hiding/showing HTML forms (on button press) using javascript

Question

My name is Michael Toscano. I am currently working on a 3 tier project for school, however I am stuck on what seems to be a trivial step. Right now, I am trying to make it so individual HTML forms are hidden by clicking one button, and shown by clicking another. There are only 2 forms on the HTML page. What I have now works if I try to hide the second form, however if I try to hide only the first form, it hides the entire page, aside from the two buttons at the top of the page (both forms). I thought that maybe I accidentally placed the second form within the first form (if that is possible), but after looking over my code it looks (to me at least) like I terminated the first form with . Anyway, the entire HTML file is as follows:

    <!DOCTYPE html>
    <html><head>

    <button type=button id=f1 onclick="func(1)">Order Form</button>
    <button type=button id=f2 onclick="func(2)">Retrieval Form</button>

    <script type="text/javascript">
    function func(a) {
        if(a==1) {
            document.getElementById("order").style.display="none";
        }
        if(a==2) {
            document.getElementById("order").style.display="block";
        }
    }
    </script>

    <script type="text/javascript">
        function showValue(newValue)
        {
            document.getElementById("range").innerHTML=newValue;
        }
    </script>
    </head>

   <body> 
<form id=order action=form.php >

    <p><center>Name: <input type=text
        name="name"
        placeholder="Enter Your Name"
        required
        autocomplete="on"></center><br>

    <center>Email: <input type=text
        name="email"
        placeholder="Enter Your Email"
        required
        autocomplete="off"></center><br>

    <center>Password: <input type=text
        name="password"
        placeholder="15 Characters Or Less"
        required
        autocomplete="off"></center><br>

    <center>Address: <input type=text
        name="address"
        placeholder="Enter Your Address"
        required
        autocomplete="off"></center><br>

    <center>Laptops: <input type=range 
        name=laptop 
        value=0 
        min=0 
        max=10 
        onChange="showValue(this.value)">

    <center>Monitors: <input type=range 
        name=monitor 
        value=0 
        min=0 
        max=10 
        onChange="showValue(this.value)">

    <center>Mouses: <input type=range 
            name=mouse  
        value=0 
        min=0 
        max=10 
        onChange="showValue(this.value)">

    <center>Keyboards: <input type=range
        name=keyboard
        value=0
        min=0
        max=10
        onChange="showValue(this.value)">

    <br>
    <br>

    <center>Shipping Carrier: <SELECT name="delivery">
        <option value="fedex">FEDEX</option>
        <option value="ups">UPS</option>
    </SELECT></center>

    <br>

    <center>Would you like an email receipt?<br>
    <center>Yes <input type="radio" name="group1" value=1> No
    <input type="radio" name="group1" value=0 checked></center><br>

    <br>

    <center><input type=submit value="Submit Order"></center></p>

    </form>

    <form id=retrieve action=form2.php>

    First Name: <input type=text name=first><br>
    Last Name: <input type=text name=last><br>
    Password: <input type=password name=p1><br>
    Retype Password: <input type=password name=p2><br>
    <input type=submit>

    </form>
</body>
</html>

I would like to point out that I am fairly new to HTML and javascript, so I would greatly appreciate it if a brief explanation could accompany anybody's response. Thank you all, in advance.

ErikE · Accepted Answer

There are several issues:

You don't need a separate script tag for each Javascript function. Just put all the Javascript together in one script tag.
I strongly advise to use CSS to center elements instead of the <center> tag. You have many unclosed <center> tags, to boot. Personally, I think left-justified looks a lot better than centered.
If your HTML is a full document, you need tags <head>, and <body>. Use the W3C Markup Validation Service to be sure that you have valid HTML code.
Attribute values in HTML should be in quotes, for example <form id=order> would be <form id="order">. It is possible that even required needs to be required="required".
It is considered best practice to "wire up" javascript events using javascript instead of putting inline event handlers. For example:
```
document.getElementById('f1').onclick = function () {
    func(1);
};
```
I think it would actually be better to put a data attribute on your buttons that has the id of the form to show/hide and then in the onclick event (which now only needs a single version of the function with no if statement) you just pull the expando data value. For example <button data-for="order">.
In your code for showing/hiding, you are only working with one form. Where are the references to the other? Also, to get the toggle effect you are looking for, you'll need to detect if the form is already hidden or not and change its display style appropriately.
You should research the difference in Javascript between == and ===.
There is no need for so much vertical space between your HTML elements. I am all for breaking up long lines, more than most, but when the markup is so spread out it becomes hard to scan. You can put <br> at the end of lines.
Many Javascript programmers prefer putting their opening curly braces at the end of the prior line. It's a minor consideration, but it helps save white space. You will see that in my code example I followed this convention. The choice is up to you.
Your <select> tag should be lower case.
"15 characters or less" is incorrect grammar. It should be "15 characters or fewer" or perhaps "15 or fewer characters" or even better, "up to 15 characters"

Please see this JS Fiddle for my version of a cleaned-up HTML document that is working.

Antharon · Answer

at first you have to move your buttons into document body

after that you can make your function a bit nicer.

//names of functions as well as attributes should describe them
function show(elementId) { 
  //now we kick out both conditional we do not need them anymore

  //we hide both forms
  document.getElementById("order").style.display="none";
  document.getElementById("retrieve").style.display="none";

  //and then we simply show wanted one isn't that nicer and cleaner?
  document.getElementById(elementId).style.display="block";
}

and now when we have our function, we can apply it on our buttons

<button type="button" onclick="show('order');">Order Form</button>
<button type="button" onclick="show('retrieve');">Retrieval Form</button>

as you can see we kicked IDs of them because they are unnecessary and we put attributes into quotes. This must go to the body element instead of head!

instead of this style of blocks in form:

<p><center>Name: <input type=text
name="name"
placeholder="Enter Your Name"
required
autocomplete="on"></center><br>

you can do it nicer way like this:

<p style="text-align:center"><input type="text"
  name="name"
  placeholder="Enter Your Name"
  required="required"
  autocomplete="on" />
</p>

(yes, every line is a new paragraph so you don't need to use BR tags)

Hiding/showing HTML forms (on button press) using javascript

Tags:

javascript

html

forms

hide

show

Mike

2 Answers

ErikE

Antharon

Recent Activity

Donate For Us

Hiding/showing HTML forms (on button press) using javascript

Tags:

javascript

html

forms

hide

show

Mike

2 Answers

ErikE

Antharon

Related questions

Recent Activity

Donate For Us