Show Inputbox on button click

Question

Im trying to optimize my Login/Registerscript and want to know how i can show 2 Inputboxes after a button was clicked.

JavaScript:

<script type="text/javascript">
function unhideLog() {
document.getElementById('login').style.display = "block";
}
function unhideReg() {
document.getElementById('register').style.display = "block";
}
</script>

HTML:

<form action="register.php" method="POST">
    <input type="button" value="Registrieren" onClick="unhideReg()" />
    <input type="input" value="test" name="userreg" id="register" style="display:none"  />
    <input type="password" value="Test" name="passreg" id="register" style="display:none" />
    <input type="submit" value="Registrieren" id="register" style="display:none"/>
</form>

I dont know if its possible when the Inputboxes all have the same ID. Also tried it already with different ID's but it doesnt worked also. The problem is that the Inputboxes wont be shown after the Button was clicked.

Hope someone knows how to solve this.

Answer 1

In HTML IDs must be unique , You are using id="register" multiple times thus your HTML is invalid.

Make IDs unique.

See DEMO

Is there no possibility to show all Inputboxes at once

You can use document.getElementsByClassName , Returns an array of all child elements which have any of the given class names.

DEMO with document.getElementsByClassName

EDIT

OP updated question

You need to use () .

Use unhideReg() instead of unhideReg

 <input type="button" value="Registrieren" onClick="unhideReg()" /> 

DEMO

Answer 2

ID should be unique. For shared behavior you should use .class

Here is an EXAMPLE of using classes to show couple of elements by .className

HTML :

<form action="register.php" method="POST">
    <input type="button" value="Registrieren" onclick="showControls('hiddenControl');" />
    <input type="input" class="hiddenControl" value="test" name="userreg" />
    <input type="password" class="hiddenControl" value="Test" name="passreg" />
    <input type="submit" class="hiddenControl" value="Registrieren" />
</form>

CSS :

.hiddenControl {display:none;}

JS :

function showControls(className) {
    var els = document.getElementsByClassName(className);
    for (var i = 0, len = els.length; i < len; i++) {
        els[i].style.display = 'block';
    }
}