JavaScript – пример расширения формы регистрации

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

В прошлой статье JavaScript для начинающих мы рассмотрели принципы программирования на JavaScript и даже рассмотрели небольшой пример модификации данных на странице без ее перезагрузки, так сказать освоили азы данного языка программирования, а сегодня попробуем написать уже программу посложней, которую можно будет, кстати, применить на настоящем сайте.

Теперь давайте по порядку, объясню задачу, у нас есть простенькая форма регистрации с тремя полями: Имя, email, пароль. Но допустим, пользователь захотел сразу при регистрации указать больше информации о себе, для этого мы сделаем кнопку «Обычная форма» и «Расширенная форма», по нажатию на которую плавно будет появляться остальная часть формы, с дополнительными полями. Да, еще как Вы знаете очень часто на сайтах реализовано проверка вводимых данных, но на многих эти данные проверяют серверные скрипты, что для пользователя не удобно. Допустим, он не заполнил  обязательное поле и нажал «Зарегистрироваться» и все эти данные полетели на сервер, он их там обработает и только потом отправит сообщение об ошибке, что «Форма заполнена неправильно», как Вы понимаете на все это нужно время, а пользователь не любит ждать. Поэтому для удобства пользователя мы организуем такую проверку на языке JavaScript без обращения к серверу (на сервере само собой будет проверка!), для того чтобы пользователь мог мгновенно увидеть, что он заполнил форму неправильно.

Нашу задачу я решил именно так, как будет представлено в примере ниже, не судите строго, у кого есть предложения получше, пишите в комментариях.

Для начала посмотрите на то, что получилось, сразу скажу, что визуальное оформление можете изменить, как хотите. А потом разберем все поподробней, кстати, в коде тоже будут комментарии. Данный пример точно работает в браузерах: Mozilla Firefox, Google-Chrome и Opera.

Все это реализовано на JavaScript, объясню общую картину, так сказать сам алгоритм работы данной программы. Рассказывать подробно про код HTML, я думаю, не стоит, хотя я его здесь тоже указал и немножко описал.

Все начинается с функции, которая будет назначать обработчик события для события onsubmit, т.е. это событие вызывается при нажатии кнопки на форме с типом submit. Это реализовано с помощью window.onload, т.е. после загрузке всей страницы событию onsubmit назначается обработчик события функция proverka. Которая, из названия следует, проверяет все ли обязательные поля, заполнил пользователь, и выдает соответствующее сообщение. У нас будет три обязательных поля: Имя, email, пароль. И если хоть одно не заполнено, то она об этом сообщит, причем с указанием какое именно поле не заполнено. Да кстати, так как в нашем примере некуда отправлять данные из формы, я в любом случае никуда их не отправляю, в коде найдите пометку о том, чтобы снять это ограничение, и Вы могли, если все данные заполнены правильно, отправлять их на сервер, да, кстати, Вам нужно будет настроить еще серверные скрипты для обработки этих данных.

Переходим дальше, и тут у нас идет одна из самых главных функций, я ее назвал isMore. Данная функция циклом добавляет все поля (у нас добавление каждого поля делает отдельная функция). Чтобы было понятней, она не добавляет поля, она запускает по очереди с небольшим интервалом те функции, которые и добавляют эти самые поля. Это сделано для того чтобы был эффект плавного появления этих полей. И в конце этой функции мы меняем надпись «Обычная форма» на «Расширенная форма», чтобы пользователь мог видеть на какую форму ему нужно перейти в случае такой необходимости. И еще она проверяет, открыта ли наша расширенная форма или нет, путем поиска идентификатора metka, в случае нахождения этой метки она понимает что форма открыта и закрывает ее, а в случае если не находит, то функция понимает что расширенную форму нужно открыть.

Далее идет функция isNormal, которая возвращает все назад, путем удаления всех добавленных элементов с помощью цикла for, на самом деле она делает это не сама, а с помощью функции deleteTR. Функция isNormal, точно также как и isMore, по очереди с небольшим интервалом запускает функцию, только теперь для удаления этих самых полей, сделано это также для того, чтобы поля исчезали плавно.

Также в коде Вы обнаружите такую функцию как alignCenter, она сделана только для того чтобы все добавленные элементы были отцентрированы.

Далее идет 6 функций каждая, из которых добавляет в нашу форму по одному полю. Общий принцип этих функций такой, сначала мы отрисовываем строку (тег tr), потом столбец (тег td), а потом уже наполняем их нужными нам элементами, например

var input = document.createElement(«INPUT»);

input.setAttribute(«type», «text» );

input.setAttribute(«id», «metka» );

input.setAttribute(«name», «lastName» );

td.appendChild(input);

здесь мы создали на форме элемент input, создали у него 3 атрибута, и привязали его к нашей ячейке.

Остальные функции реализованы по такому же принципу.

Весь код представлен ниже, Вы также можете скачать архив, в котором готовый скрипт и HTML файл.

Код JavaScript – пример расширения формы

   
   //пишем функцию для привязки события onsubmit нашей формы
   window.onload = function () {
        var     myform = document.getElementById("myForm");//находим элемент нашей формы по id
        myform.onsubmit = proverka /*привязываем событие onsubmit по наступлению которого 
                                    будет запускаться функция proverka*/
   }
   //пишем функцию для цикличного запускания функций по добавлению полей
   function isMore (){
        var form = document.getElementById("myTable");//находим элемент таблица по ее id
                if (!document.getElementById("metka")){ /*условие по которому функция будет 
                                                          определять открыта ли форма или нет*/
                        for (var i=1; i<=6; i++){  /*если форма закрыта, то циклом по таймауту
                                                       запускаем функции добавления полей*/
                                var p = "pole"+i+"()";//формирование названия нашей функции 
                                var t1 = i * 100;//расчет времени таймаута
                                var t =100 + t1;//расчет времени таймаута
                                setTimeout (p,t)/*запуск функций через определенное
                                                  количество времени*/
                        }
        var myIn = document.getElementById("myIn");/*находим кнопку «расширенная форма» 
                                                                     по id*/
        myIn.setAttribute("value", "  Обычная форма  " );/*меняем название 
                                                         кнопки на «обычная форма»*/
        myIn.removeAttribute("ONCLICK");/*удаляем атрибут ONCLICK, для того 
                                         чтобы в процессе выполнения кода сам 
                                           код нельзя было запустить еще раз*/  
        }
        else
                isNormal();/*если форма уже открыта, то запускаем функцию по удалению 
                                    полей для расширенной формы*/ 
   }
   //функция по запуску плавного удаления полей формы
   function isNormal(){
        var     form = document.getElementById("myTable");//находим элемент таблица по ее id
        var del = form.getElementsByTagName("TR");//находим все теги tr в нашей таблице
                for (var i = 9; i < del.length; i--){ /*цикл по запуску функций для 
                                                              удаления полей, по таймауту*/
                        if (i==3){ /*если цикл доходит до 3 поля то он прекращается, 
                                                чтобы у нас обязательные поля не удалились*/ 
                                break;
                        } else 
                        var fun = "deleteTR"+"("+i+")";/*формирование названия функции по 
                                                            удалению нашей строки в таблице, 
                                                             т.е. всех полей в этой строке*/
                        var t1 = i * 100;//расчет времени таймаута
                        var t =1000 - t1;//расчет времени таймаута
                        setTimeout (fun,t)//запуск функций через определенное количество времени
                }
                var myIn = document.getElementById("myIn");//находим кнопку «обычная форма» по id
                myIn.setAttribute("value", "Расширенная форма" );/*меняем название кнопки на 
                                                                      «расширенная форма»,      
                                                                     так как мы ее свернули*/
   }
   //функция по удалению строк, параметром передаем номер строки
   function deleteTR (number){
        var form = document.getElementById("myTable");//находим элемент таблица по ее id
    var del = form.getElementsByTagName("TR");//находим все теги tr в нашей таблице
                del[number].parentNode.removeChild(del[number]);//удаляем нужную нам строку
   }
   //функция для проверки правильности заполнения формы
   function proverka (){
        var proverkaName = document.getElementById("prName");//находим элемент «имя» по id
        var proverkaEmail = document.getElementById("prEmail");//находим элемент «email» по id
        var proverkaPsw = document.getElementById("prPsw");//находим элемент «пароль» по id
                //условие проверки полей
                if (proverkaName.value=="" || proverkaEmail.value=="" || proverkaPsw.value==""){
                        proverkaName = (proverkaName.value) ? "" : "Поле - имя\n"
   /*если в поле «имя» пусто то в переменную  proverkaName вставляем "Поле – имя", для 
   вывода в предупредительном сообщении*/
                        proverkaEmail = (proverkaEmail.value) ? "" : "Поле - email\n"
   /*если в поле «email» пусто то в переменную proverkaEmail вставляем "Поле – email", для 
   вывода в предупредительном сообщении */
                        proverkaPsw = (proverkaPsw.value) ? "" : "Поле - пароль\n"
   /*если в поле «пароль» пусто то в переменную proverkaPsw вставляем 
   "Поле – пароль", для вывода в предупредительном сообщении */
   alert ("Не заполнены следующие обязательные поля:\n"+proverkaName+proverkaEmail+proverkaPsw);
   /*формируем предупредительное сообщение */
        return  false;/*прекращаем выполнения события onsubmit, 
   для того чтобы наши «неправильные» данные не отправились на сервер */
                }
        else{
        //сообщение что данные заполнены правильно и отправились на сервер
  alert ("Данные успешно отправлены на сервер\nПримечание:\nНа самом деле эти данные \
  никуда не отправлены, Вам сначала необходимо настроить прием этих данных на своем \
  сервере, т.е. настроить серверные скрипты");
        return  false;/*для применения на действующем сайте эту строку необходимо удалить!!!
        а то в случае правильного заполнения формы данные все равно не отправятся*/ 
                }
  }
  //функция выравнивания полей по центру
   function alignCenter (){
        var form = document.getElementById("myTable");//находим элемент таблица по ее id
        var alCentr = form.getElementsByTagName("TR")//находим все теги tr в нашей таблице
        for (var i = 0; i < alCentr.length; i++){/*циклом переберем все строки 
                                                     таблицы добавляем им атрибут align*/ 
        alCentr[i].setAttribute("align", "center" );//добавляем строкам атрибут align
                }
   }
   /*Далее идут функции по добавлению строк в нашу форму, 
   другими словами полей формы, они все однотипные, поэтому прокомментирую только первую*/
   function pole1 () {
        var form = document.getElementById("myTable");//находим элемент таблица по ее id
        var tr = document.createElement("TR");//Создаем элемент tr
                form.appendChild(tr);//Привязываем его к нашей таблице
        var td = document.createElement("TD");//Создаем элемент td
                tr.appendChild(td);//Привязываем его к нашей строке
        var text = document.createTextNode("Отчество:");//Создаем текстовый узел
                td.appendChild(text);//Привязываем его к нашей ячейке
        var td = document.createElement("TD");//Создаем второй элемент td, т.е. второй столбец
                tr.appendChild(td);//Привязываем его к нашей строке
        var input = document.createElement("INPUT");//Создаем элемент INPUT, для ввода данных
                input.setAttribute("type", "text" );//Добавляем атрибут
                input.setAttribute("id", "metka" );//Добавляем атрибут
                input.setAttribute("name", "lastName" );//Добавляем атрибут
                td.appendChild(input);//Привязываем его к нашей ячейке
                        alignCenter();//Запускаем функцию для выравнивания по центру
   }
   function pole2 (){
        var form = document.getElementById("myTable");
        var tr = document.createElement("TR");
                form.appendChild(tr);
        var td = document.createElement("TD");
                tr.appendChild(td);
        var text = document.createTextNode("Пол:");     
                td.appendChild(text);
        var td = document.createElement("TD");
                tr.appendChild(td);
        var input = document.createElement("INPUT");
                input.setAttribute("type", "RADIO" );
                input.setAttribute("name", "sex" );
                input.setAttribute("value", "man" );
                td.appendChild(input);
        var text = document.createTextNode("Мужской");
                td.appendChild(text);
        var input = document.createElement("INPUT");
                input.setAttribute("type", "RADIO" );
                input.setAttribute("name", "sex" );
                input.setAttribute("value", "woman" );
                td.appendChild(input);
        var text = document.createTextNode("Женский");
                td.appendChild(text);
                        alignCenter();
   }
   function pole3 (){
        var form = document.getElementById("myTable");
        var tr = document.createElement("TR");
                form.appendChild(tr);
        var td = document.createElement("TD");
                tr.appendChild(td);
        var text = document.createTextNode("Год рождения");
                td.appendChild(text);
        var td = document.createElement("TD");
                tr.appendChild(td);
        var input = document.createElement("INPUT");
                input.setAttribute("type", "text" );
                input.setAttribute("name", "god" );
                td.appendChild(input);
                        alignCenter();
   }
   function pole4 (){
        var form = document.getElementById("myTable");
        var tr = document.createElement("TR");
                form.appendChild(tr);
        var td = document.createElement("TD");
                tr.appendChild(td);
        var text = document.createTextNode("Страна");
                td.appendChild(text);
        var td = document.createElement("TD");
                tr.appendChild(td);
        var input = document.createElement("INPUT");
                input.setAttribute("type", "text" );
                input.setAttribute("name", "coutry" );
                td.appendChild(input);
                        alignCenter();
   }
   function pole5 (){
        var form = document.getElementById("myTable");
        var tr = document.createElement("TR");
                form.appendChild(tr);
        var td = document.createElement("TD");
                tr.appendChild(td);
        var text = document.createTextNode("Город");
                td.appendChild(text);
        var td = document.createElement("TD");
                tr.appendChild(td);
        var input = document.createElement("INPUT");
                input.setAttribute("type", "text" );
                input.setAttribute("name", "city" );
                td.appendChild(input);
                        alignCenter();
   }
   function pole6 (){
        var form = document.getElementById("myTable");
        var tr = document.createElement("TR");
                form.appendChild(tr);
        var td = document.createElement("TD");
                tr.appendChild(td);
        var text = document.createTextNode("Доп. информация");
                td.appendChild(text);
        var td = document.createElement("TD");
                tr.appendChild(td);
        var input = document.createElement("TEXTAREA");
                input.setAttribute("rows", "6" );
                input.setAttribute("cols", "21" );
                input.setAttribute("name", "dopinfo" );
                td.appendChild(input);
                        alignCenter();
        var myIn = document.getElementById("myIn");//находим кнопку «расширенная форма» по id
        myIn.setAttribute("ONCLICK","isMore()");//возвращаем ей атрибут ONCLICK
   }

Код HTML — пример расширения формы

   
   <form id = "myForm">
     <table id="myTable" border="5" cellpadding = "10" cellspacing="0"bgcolor="#4EAEC1">
        <tr align = "center" bgcolor = "green" >
                <td Width = 180>
                    <input type="button"value="Расширенная форма"ONCLICK="isMore();"id="myIn"/>
                </td>
                <td Width = 200>
                        <input type="submit" value="Зарегистрироваться" METHOD="POST"/> 
                                                          <!--поставьте здесь атрибут action-->
                </td>
        </tr>
        <tr align = "center">
                <td>Имя:</td>
                <td>
                        <input type="text" name="name" id = "prName"/>
                </td>
        </tr>
        <tr align = "center">
                <td>E-mail:</td> 
                <td>
                        <input type="text" name="email" id = "prEmail" />
                </td>
        </tr>
        <tr align = "center">
                <td>Пароль:</td>
                <td>
                        <input type="password" name="psw" id = "prPsw" >
                </td>
        </tr>
     </table>
   </form>

Если Вы внимательно посмотрели код, то заметили, что в начале (в функции isMore) я удаляю атрибут ONCLICK у элемента формы, а в конце (в функции pole6), я его добавляю назад, это сделано для того, если вдруг в процессе выполнения нашего кода пользователь вдруг захочет еще несколько раз подряд нажать на эту кнопку и соответственно запустит несколько раз нашу программу, поэтому я удаляю привязку события к кнопке в начале выполнения программы, а в конце возвращаю назад.

В общем, алгоритм вот такой, как говорится как смог, так и написал, я думаю что есть, конечно, и получше варианты реализации такой задачи, но пока я эту задачу реализовал вот так, если у Вас есть свои варианты то, пожалуйста, пишите их в комментариях.

Да еще, если Вы решите применить данный скрипт у себя на сайте, то не забудьте в форме у элемента input с типом submit поставить атрибут ACTION с необходимым значением (страницу, которая будет принимать данные из формы), и в скрипте удалить строку return  false, в комментариях это помечено.

Надеюсь, данный пример был вам полезен, и Вы хоть немного научились писать и понимать код JavaScript. В следующих статьях продолжим изучение языка программирования JavaScript.