How do I show a div with a form only if a button is clicked?

问题

I have a table inside a div that contains a form for the user to fill out. Above the div is a button that says "Customer info". I want to show the form only if the customer wants to fill out the information. The idea is that if they want to fill it out they can click the button and the form will appear below. There are many of these sections so I only want the customer to have to see what they want to see. Below is an example...

<input type="button" value="Customer Info" onClick="">
<div>
<form>
<table>
<tr>
<td>Name:<input type="text" value="" id="name" name="name"></td>
</tr>
</table>
</div>

My question is how can I write a simple javascript function that will act upon clicking the button that will show and hide the Div? The form would still be there just hidden and the values would just be blank.

回答1:

You can use the onClick event to do that:

Working Example

HTML:

<button id="some_id">Hide div</button>

<form id="some_form">

<form>

javascript:

<script type="text/javascript">
    var theButton = document.getElementById('some_id');
    
    theButton.onclick = function() { 
        document.getElementById('some_form').style.visibility='hidden';   
    }
    
</script>
   

回答2:

Inline javascript is considered bad practice

ie. onClick=""

Use something like this instead

<input id="info" type="button" value="Customer Info">
<div id="myDiv">
    <form>Name:
        <input type="text" value="" id="name" name="name">
        </input>
    </form>
</div>

var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");

function show() {
    myDiv.style.visibility = "visible";
}

function hide() {
    myDiv.style.visibility = "hidden";
}

function toggle() {
    if (myDiv.style.visibility === "hidden") {
        show();
    } else {
        hide();
    }
}

hide();

button.addEventListener("click", toggle, false);

on jsfiddle

Here is the code suggested by David Thomas in the comments. It performs exactly the same task, but uses shorthand if-else for the toggle function and doesn't provide you with separate show and hide functions.

<input id="info" type="button" value="Customer Info">
<div id="myDiv">
    <form>Name:
        <input type="text" value="" id="name" name="name">
        </input>
    </form>
</div>

var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");

function toggle() {
    myDiv.style.visibility = myDiv.style.visibility === "hidden" ? "visible" :  "hidden";
}

toggle();

button.addEventListener("click", toggle, false);

on jsfiddle

回答3:

 <script type="text/javascript">
$("#music").click(function () {
$("#musicinfo").show("slow");
});
</script>

you can change effect like as toggle, fadeToggle in place of show...

来源：https://stackoverflow.com/questions/16195942/how-do-i-show-a-div-with-a-form-only-if-a-button-is-clicked