How can I hide/show a form when a button is clicked using javascript?

Question

I actually need help to correct my code. I have watched a video from youtube but in that video, he use checkbox instead of button. so i'm having problem with the if else statement of the javascript. i have already checked the previous post that have same problem but couldn't find the one that can solve my problem. please help me. Thank you so much.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="css/tabMenu.css" rel="stylesheet" type="text/css" />

    <style>
        .hidden {
            display:none;}
    </style>
    <script type="text/javascript">
        function showHide()
        {
            var button = document.getElementById("butt");
            var hiddeninput = document.getElementByClassName("hidden");

                if(button.click)
                {
                    hiddeninput.style.display = "block";
                }
                else
                {
                    hiddeninput.style.display = "none";
                }
        }

    </script>

    </head>

    <body>
    <div id="navbar">
    <div id="holder">

    <ul>
    <li><a href="employee.php" id="onlink">Employer Database</a></li>
    <li><a href="companypresence.php">Company Presence</a></li>
    <li><a href="companypromotion.php">Company Promotion</a></li>
    </ul>



    </div><!--end of holder div -->
    </div><!--end of navbar div -->

    </br>

    <p id="p1"><u>Employer List</u></p>
    </br>


    <table width="1345" height="113" border="1" id="table1">
      <tr id="tr1">
        <th width="46" height="35" scope="col">No.</th>
        <th width="93" scope="col">Title</th>
        <th width="157" scope="col">First Name</th>
        <th width="171" scope="col">Last Name</th>
        <th width="128" scope="col">Position</th>
        <th width="130" scope="col">Sector</th>
        <th width="178" scope="col">Company Name</th>
        <th width="107" scope="col">Country</th>
        <th width="97" scope="col">Email</th>
        <th width="78" scope="col">Phone</th>
        <th width="84" scope="col">Action</th>
      </tr>
      <tr>
        <td height="34">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="34">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    <br/>
    <input name="addbutton" type="button" value="Add Employer" id="butt" onclick="showHide()"/>
    <br/>
    <br/>
    <br/>
    <form id="form1" action="add_employer.php" method="post" class="hidden">
    <p align="left"><u><strong>Add Employer Detail</strong></u></p>
    <br/>
    <br/>
    <TABLE  cellpadding="5" cellspacing="2" align="center">
                    <TR>
                        <td><strong>Title </strong></td>
                        <td><strong>:
                        <input name="title" value="" type="text" size="50" maxlength="50">
                        </strong></td>
                    </TR>
                    <TR>
                        <td><strong>First Name </strong></td>
                        <td><strong>:
                        <input name="first_name" value="" type="text" size="50" maxlength="50">
                        </strong></td>
                    </TR>
                    <TR>
                        <td><strong>Last Name</strong></td>
                        <TD><strong>:
                        <input name="last_name" value="" type="text" size="50" maxlength="50">
                        </strong></TD>
                    </TR>
                    <TR>
                        <td><strong>Position</strong></td>
                        <TD><strong>:
                        <input name="position" value="" type="text" size="50" maxlength="50">
                        </strong></TD>
                    </TR>
                    <TR>
                        <td><strong>Sector</strong></td>
                        <TD><strong>:
                        <input name="sector" value="" type="text" size="50" maxlength="50">
                        </strong></TD>
                    </TR>
                    <TR>
                        <td><strong>Company Name</strong></td>
                        <TD><strong>:
                        <input name="company_name" value="" type="text" size="50" maxlength="50">
                        </strong></TD>
                    </TR>
                    <TR>
                        <td><strong>Country</strong></td>
                        <TD><strong>:
                        <input name="country" value="" type="text" size="50" maxlength="50">
                        </strong></TD>
                    </TR>
                    <TR>
                        <td><strong>Email</strong></td>
                        <TD><strong>:
                        <input name="email" value="" type="text" size="50" maxlength="50">
                        </strong></TD>
                    </TR>
                    <TR>
                        <td><strong>Phone</strong></td>
                        <TD><strong>:
                        <input name="phone" value="" type="text" size="50" maxlength="50">
                        </strong></TD>
                    </TR>
                    <TR>
                        <td><strong>Action</strong></td>
                        <TD><strong>:
                        <input name="action" value="" type="text" size="50" maxlength="50">
                        </strong>
                        <input name="addbutton" type="button" value="Add Employer"/>
                        <input name="clear" type="button" value="Clear"/>
                        </TD>

                    </TR>               

                </TABLE>
    <br/>
    <br/>       
    </form>



    </body>
    </html>

Do you wan to get toggle effect here, i.e on first click form will get displayed and on second click it will get hidden and so on?? — Ruhul
– Ruhul, Commented Aug 24, 2016 at 4:02
getElementByClassName is not a function. getElementsByClassName is and returns a node list. Access the first element with [0]. You can also use visibility CSS attribute — Andrew Li
– Andrew Li, Commented Aug 24, 2016 at 4:03

Mairaj Ahmad · Accepted Answer · 2016-08-24 04:13:33Z

1

You can target the form using id and add remove class to show hide the form.

<style>
        .hidden {
            display:none;}

    </style>

    <script type="text/javascript">
        function showHide() {
            var hiddeninput = document.getElementById("form1");
            if (hiddeninput.classList.contains("hidden")) {
                hiddeninput.classList.remove("hidden");
            }
            else {
                hiddeninput.classList.add("hidden");
            }
        }

    </script>

answered Aug 24, 2016 at 4:13

Mairaj Ahmad

14.6k2 gold badges29 silver badges43 bronze badges

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

Comments

RobG · Accepted Answer · 2016-08-24 04:25:42Z

1

Given that you're hiding the element with a class, you can show and hide it by removing and re-adding the class. The classList.toggle method* will do that:

function hide(id) {
  var el = document.getElementById(id);
  if (el && el.classList) {
    el.classList.toggle('hidden');
  }
   
}

<style type="text/css">
  .hidden {
    display: none;
  }
</style>

<body>
  
<input id="foo"><br>
<button onclick="hide('foo')">Hide input</button>

  
  
  
  
</body>

* Note that the reference to MDN includes a polyfill for Element.classList to support older browsers.

edited Aug 24, 2016 at 4:25

answered Aug 24, 2016 at 4:10

RobG

148k32 gold badges180 silver badges216 bronze badges

5 Comments

nnnnnn Over a year ago

I don't think setting .style.display to an empty string will show the element, because it is currently hidden via a class.

RobG Over a year ago

@nnnnnn—yep, oops…

nnnnnn Over a year ago

P.S. Regarding the note about the ternary operator possibly being a maintenance issue, it's a matter of opinion, but personally I think it makes the code clearer for this sort of thing: it lets you read the code as "set that property to [some computed value]", as compared to "evaluate that property and do x else y", where it then takes an extra moment to realise that actually x and y are just setting the same property. The fact that it also happens to be shorter is just a bonus.

RobG Over a year ago

@nnnnnn—yep, all fair comment but removed all that anyway. ;-)

nnnnnn Over a year ago

Cool. .toggle() also makes the intent clear immediately. Time to vote...

cakpep · Accepted Answer · 2016-08-24 04:35:38Z

how about this... ??

function showHide() {
  var button = document.getElementById("butt");
  var hiddeninput = document.getElementsByClassName("hidden");
  var form1 = document.getElementById("form1");  
  if (form1 && form1.style.display=="none") {
    form1.style.display = "block";    
  } else {
    form1.style.display = "none";
  }
}

<div id="navbar">
  <div id="holder">

    <ul>
      <li><a href="employee.php" id="onlink">Employer Database</a>
      </li>
      <li><a href="companypresence.php">Company Presence</a>
      </li>
      <li><a href="companypromotion.php">Company Promotion</a>
      </li>
    </ul>
  </div>
  <!--end of navbar div -->

  </br>

  <p id="p1"><u>Employer List</u>
  </p>
  </br>


  <table width="1345" height="113" border="1" id="table1">
    <tr id="tr1">
      <th width="46" height="35" scope="col">No.</th>
      <th width="93" scope="col">Title</th>
      <th width="157" scope="col">First Name</th>
      <th width="171" scope="col">Last Name</th>
      <th width="128" scope="col">Position</th>
      <th width="130" scope="col">Sector</th>
      <th width="178" scope="col">Company Name</th>
      <th width="107" scope="col">Country</th>
      <th width="97" scope="col">Email</th>
      <th width="78" scope="col">Phone</th>
      <th width="84" scope="col">Action</th>
    </tr>
    <tr>
      <td height="34">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td height="34">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  <br/>
  <input name="addbutton" type="button" value="Add Employer" id="butt" onclick="showHide()" />
  <br/>
  <br/>
  <br/>

  <form id="form1" action="add_employer.php" method="post" style="display: none;">
    <p align="left"><u><strong>Add Employer Detail</strong></u>
    </p>
    <br/>
    <br/>
    <TABLE cellpadding="5" cellspacing="2" align="center">
      <TR>
        <td><strong>Title </strong>
        </td>
        <td><strong>:
                        <input name="title" value="" type="text" size="50" maxlength="50">
                        </strong>
        </td>
      </TR>
      <TR>
        <td><strong>First Name </strong>
        </td>
        <td><strong>:
                        <input name="first_name" value="" type="text" size="50" maxlength="50">
                        </strong>
        </td>
      </TR>
      <TR>
        <td><strong>Last Name</strong>
        </td>
        <TD><strong>:
                        <input name="last_name" value="" type="text" size="50" maxlength="50">
                        </strong>
        </TD>
      </TR>
      <TR>
        <td><strong>Position</strong>
        </td>
        <TD><strong>:
                        <input name="position" value="" type="text" size="50" maxlength="50">
                        </strong>
        </TD>
      </TR>
      <TR>
        <td><strong>Sector</strong>
        </td>
        <TD><strong>:
                        <input name="sector" value="" type="text" size="50" maxlength="50">
                        </strong>
        </TD>
      </TR>
      <TR>
        <td><strong>Company Name</strong>
        </td>
        <TD><strong>:
                        <input name="company_name" value="" type="text" size="50" maxlength="50">
                        </strong>
        </TD>
      </TR>
      <TR>
        <td><strong>Country</strong>
        </td>
        <TD><strong>:
                        <input name="country" value="" type="text" size="50" maxlength="50">
                        </strong>
        </TD>
      </TR>
      <TR>
        <td><strong>Email</strong>
        </td>
        <TD><strong>:
                        <input name="email" value="" type="text" size="50" maxlength="50">
                        </strong>
        </TD>
      </TR>
      <TR>
        <td><strong>Phone</strong>
        </td>
        <TD><strong>:
                        <input name="phone" value="" type="text" size="50" maxlength="50">
                        </strong>
        </TD>
      </TR>
      <TR>
        <td><strong>Action</strong>
        </td>
        <TD><strong>:
                        <input name="action" value="" type="text" size="50" maxlength="50">
                        </strong>
          <input name="addbutton" type="button" value="Add Employer" />
          <input name="clear" type="button" value="Clear" />
        </TD>

      </TR>

    </TABLE>
    <br/>
    <br/>
  </form>

This is different to the OP, where the element is hidden with a class, not the display property. While it works, the different approach should be explained and the pros and cons vs the OP discussed.

Rafi Ud Daula Refat · Accepted Answer · 2016-08-24 04:01:44Z

-1

You can use jQuery for that.

For hiding do that in the onClick event on the button.

$( ".target" ).hide();

For showing

$( ".target" ).show();

answered Aug 24, 2016 at 4:01

Rafi Ud Daula Refat

2,25520 silver badges28 bronze badges

2 Comments

Andrew Li Over a year ago

But what's the point of jQuery when the OP is using vanilla JS and makes no mention of it?

nnnnnn Over a year ago

If you check the code shown in the question, the OP already has code to handle the actual hide and show, but seems to be having trouble running that code at the appropriate moment.

Collectives™ on Stack Overflow

How can I hide/show a form when a button is clicked using javascript?

4 Answers 4

Comments

5 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related