Как сделать так, чтобы одно поле ввода заменяло другое при отправке инициала?

0

Я делаю простую регистрационную форму для веб-сайта, изначально поле имени пользователя будет отображаться с помощью кнопки отправки. Когда кнопка отправки нажата, форма имени пользователя должна исчезнуть, и форма пароля должна заменить ее. У меня есть следующий код:

HTML

<!-- 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>

Javascript

 function switchForm() {
        document.getElementById("form1").style.display = "none";
        document.getElementById("form2").style.display = "block";
}

Не беспокойтесь о том, что форма ничего не делает, я буду беспокоиться об этом позже. Мне просто нужна помощь в переходе. Благодарю!

  • 1
    Какое отношение тег "java" имеет к этому вопросу? Какой у вас вопрос или проблема? Кажется, этот код будет работать.
  • 0
    Я не мог заставить код работать по какой-то причине. И я удалил тег "Java".
Показать ещё 1 комментарий
Теги:
forms
login

1 ответ

2

Убедитесь, что 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/

  • 0
    +1 Я только что проверил, и это точно такой же мыслительный процесс :). Вы знаете эту фразу в фильмах: «Любое сходство с живыми или мертвыми людьми просто случайно».
  • 0
    @GuyT. Хороший ответ, но вы должны скопировать код скрипки в свой ответ, чтобы люди не покидали сайт, если они не хотят играть с ним.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню