Я делаю простую регистрационную форму для веб-сайта, изначально поле имени пользователя будет отображаться с помощью кнопки отправки. Когда кнопка отправки нажата, форма имени пользователя должна исчезнуть, и форма пароля должна заменить ее. У меня есть следующий код:
<!-- Username form -->
<div id="form1">
<form>
<input type="text" id="username" name="username">
<input type="submit" value="" onclick="switchForm()">
</form>
</div>
<!-- Password form -->
<div id="form2">
<form>
<input type="password" id="password" name="password">
<input type="submit" value="" onclick="#">
</form>
function switchForm() {
document.getElementById("form1").style.display = "none";
document.getElementById("form2").style.display = "block";
}
Не беспокойтесь о том, что форма ничего не делает, я буду беспокоиться об этом позже. Мне просто нужна помощь в переходе. Благодарю!
Убедитесь, что swithForm()
определен и заменяет <input type="submit" value="" onclick="switchForm()">
с <input type="button" value="" onclick="switchForm()">
иначе он отправит вашу форму вместо выполнения события onclick
. Вы также должны установить form2
для form2
при загрузке.
<script>
function switchForm() {
document.getElementById("form1").style.display = "none";
document.getElementById("form2").style.display = "block";
}
</script>
<!-- Username form -->
<div id="form1">
<input type="text" id="username" name="username" />
<input type="button" value="asdfs" onclick="switchForm()" />
</div>
<!-- Password form -->
<div id="form2" style="display: none;">
<form>
<input type="password" id="password" name="password" />
<input type="submit" value="aaa" onclick="#" />
</form>
Посмотрите мой рабочий JSFiddle: http://jsfiddle.net/3UcJV/