Я создаю страницу регистрации, и у пользователя есть возможность либо зарегистрироваться как сотрудник, либо как администратор (переключатели). Если он захочет зарегистрироваться в качестве администратора, мне нужно добавить поле "Пароль", которое он должен знать (компания должна предоставить ему этот пароль). Вот что я пробовал
<form method="post" action="Registration.php" onSubmit="return valid(this)">
#some code here
Admin<input type="radio" name="radiobutton" id="v2" value="v2" onclick="ch()">
<script type="text/javascript">
function ch(){
var newInput=document.createElement("input");
newInput.setAttribute('type','password');
newInput.setAttribute('name','password');
newInput.setAttribute('value','password');
document.getElementById("v2").appendChild(newInput);
}
</script>
ПРИМЕЧАНИЕ. Это мой первый раз, используя javascript! Отредактированный код, по-прежнему не работает.
Вы создали новый элемент <input>
, но никогда не помещаете его в документ.
Если вы хотите увидеть элемент, вам нужно добавить его где-нибудь в дереве DOM, вызвав appendChild()
для существующего элемента.
<input>
не может быть дочерних элементов.
Вам нужно создать новый элемент.
var newInput=document.createElement("input");
и добавьте один и тот же элемент в DOM appendChild()
.
Лучше всего иметь класс под названием "скрытый", который скрывает элемент, который имеет этот класс. поэтому, если мы нажмем на радио служащего, мы дадим полям admin 'div скрытый класс, таким образом, спрячем его и удалим скрытый класс из полей employee.
Admin<input type="radio" name="radiobutton" id="v2" value="v2" onclick="changefields(1)">
Employee<input type="radio" name="radiobutton" id="v2" value="v2" onclick="changefields(2)">
<div id='employees' class='hidden'>
<!-- input for employees -->
</div>
<div id='admins' class='hidden'>
<!-- input for admins -->
</div>
<script>
function changefields(type){
if(type==2){
$("#employees").removeClass("hidden");$("#admins").addClass("hidden");
}
else{
$("#admins").removeClass("hidden");$("#employees").addClass("hidden");
}
}
</script>
<style>.hidden{display:none}</style>
JQuery намного проще в использовании:
$(selector).append("<input type="password" name="password" value="password">");