Hide/Show form in html?

Question

I'm new to html and im trying to hide/show forms if the user ticks a box a form appears below it.

I have a form eg

Name : 
Username : 
Add More Users: (tickbox) 

If the user ticks the 'Add More Users', another form with the fields 'Name,Username,Add More Users' appears below it. How is this possible?

Answer 1

HTML

<input type="checkbox" onclick="display(this)">Add more users</input>
<div id="yourDiv"> ...other forms... </div>

JavaScript

   function display(e){
    if (e.checked)
        document.getElementById('yourDiv').style.display = 'block';
    else
        document.getElementById('yourDiv').style.display = 'none';
    }

---

An even better way to do this (thanks to What )

HTML

<input id="more" type="checkbox">Add More Users</input>
<div id="yourDiv"> ...other form... </div>

JavaScript

window.onload = function () {
    document.getElementById('more').onclick = function () {
        if (this.checked)
            document.getElementById('yourDiv').style.display = 'block';
        else
            document.getElementById('yourDiv').style.display = 'none';  
    }
}

Answer 2

You will need to use scripts for that.

First of all put the form you want to Show/Hide inside a <div id="myForm"> tag and enclose it with

Then use jQuery http://www.jquery.com (download the jquery library and link it to your page and add an event at the loading of the page to run a function to check if the combo box is checked then execute:

("#myForm").toggle();

Answer 3

You can use .clone() and .append() (requires jQuery). You have give name attribute like

<input type="text" name="test[]" />