2014-02-10 4 views
0

Im пытается оптимизировать свой вход/регистратор и хочу знать, как я могу показать 2 ящика ввода после нажатия кнопки.Показать окно ввода при нажатии кнопки

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> 

я не знаю, если его возможно, когда Inputboxes имеют одинаковый идентификатор. Также попробовал это уже с разными идентификаторами, но он тоже не работал. Проблема заключается в том, что входные поля не будут отображаться после нажатия кнопки.

Надеюсь, кто-то знает, как это решить.

+0

Дайте идентификатор, чтобы сформировать вместо ввода всех формы. Это не очень хороший способ иметь несколько компонентов с одинаковым идентификатором на одной странице HTML. – Jaykishan

+0

Использование одинакового идентификатора для нескольких элементов на странице является незаконным в соответствии со стандартами HTML. Большинство браузеров будут терпеть это, и (по моему опыту) 'document.getElementById()' возвращает первый элемент с этим ID в разметке. Но не полагайтесь на это! – UweB

ответ

1

В HTML Идентификаторы должны быть уникальными, вы используете id="register" несколько раз, поэтому ваш HTML недействителен.

Сделайте идентификаторы уникальными.

См DEMO

Неужели нет возможности показать все Inputboxes сразу

Вы можете использовать document.getElementsByClassName, Возвращает массив всех дочерних элементов, которые имеют какие-либо из указанных имен классов.

DEMO with document.getElementsByClassName

EDIT

OP обновленный вопрос

Вы должны использовать ().

Использование unhideReg() вместо unhideReg

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

DEMO

+0

Уже пробовал это, я только забыл изменить его обратно. – ProfGhost

+0

Это проблема. Он работает в таких примерах, как ваш, но если я тестирую его локально, он отказывается работать. – ProfGhost

+0

@ProfGhost, ID должны быть уникальными – Satpal

0

ID должен быть уникальным. Для совместного использования вы должны использовать .class

Здесь EXAMPLE использования классов, чтобы показать пару элементов.имя класса

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'; 
    } 
} 
Смежные вопросы