How to make an authorization form? With one login field, press enter, instead of the login field, the password field appears, click enter - the data is sent to the processor?

<style type="text/css"> form label.hide { display: none; } </style> <script type="text/javascript"> function sendForm( self ) { var hasSend = true; for( var i = 0; i < self.length; i++ ) { if ( self[i].value ) { self[i].parentNode.className = "hide"; } else { self[i].parentNode.className = ""; self[i].focus(); hasSend = false; break; } } return hasSend; } </script> <form action="" method="post" onsubmit="return sendForm( this );"> <label>Login: <input type="text" name="login" /></label> <label class="hide">Password: <input type="password" name="password" /></label> </form>
  • four
    @zinteco, According to the rules of the forum, questions should not be reduced to solving tasks. Please clarify what you have done yourself and what did not work out. - Specter
  • fixed ... waiting for your help ... - zinteco
  • At what stage is the problem? Problem to show form or send data to handler? - Ella Svetlaya

2 answers 2

Here is a function that shows several blocks in turn, here you can also shove data validation, if necessary.

 function stepShow (collection, callback) { var _callback = callback || function () {}; var currentIndex = 0; var currentElement = collection[currentIndex]; function showElement(el) { el.style.display = 'block'; el.onchange = function () { el.onchange = null; // убираем обработчик с текущего элемента el.style.display = 'none'; // скрываем if(++currentIndex == collection.length) return _callback(); currentElement = collection[currentIndex]; // переходим на след. элемент showElement(currentElement); // показываем следующий }; } showElement(currentElement); }

Demo

    1) Specify your ID for the fields:

     <input id="login" type="text" name="login" /> <input id="password" type="password" name="password" />

    2) Write the processing function:

     function onEnterPress(e) { var keyCode = e.keyCode; // получаем код нажатой клавиши var lInput = document.getElementById('login').parentNode; // лейбл логина var pInput = document.getElementById('password').parentNode; // лейбл пароля if (keyCode == 13) { // если нажат интер if (pInput.class == 'hide') { // и пароль спрятан, lInput.class = 'hide'; // прячем логин (тут нужна проверка) pInput.class = ''; // открываем пароль } else { // если мы уже вводим пароль, pInput.class = 'hide'; // прячем и его lInput.parentNode.submit(); // и отправляем форму } } }

    3) Install event handlers on them:

     document.getElementById('login').addEventListener('keyDown', onEnterPress, false); document.getElementById('password').addEventListener('keyDown', onEnterPress, false);
    • For some reason, your method does not work for me .. - koza4ok
    • For an input it is not necessary to get the key code to be sure to press Enter , when on the input button press Enter, the onchagne event fires , you can use it - ThisMan