Главная страница  /  Занятия  /  #8  /  Разработать обработчик данных формы на JavaScript

Разработать обработчик данных формы на JavaScript

Задание:

Есть html-документ:
 <!DOCTYPE html>
 
 <html lang="ru">
 
  <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="index.js"></script>
   <title>Обработчик данных формы на JavaScript</title>
  </head>
 
  <body>
   <form action="action.html" method="get">
    Ваше имя:<br>
    <input name="userName" type="text" value=""><br><br>
    Ваш телефон:<br>
    <input name="userPhone" type="text" value=""><br><br>
    <input type="submit" value="Отправить">
   </form>
  </body>
 
 </html>

Необходимо написать скрипт (index.js), осуществляющий проверку полей формы на заполнение. Если поля формы не заполнены, форма не отправляется. Кроме того, необходимо создать html-документ action.html, к которому нужно подключить скрипт (action.js) – обработчик данных формы, выводящий имя пользователя и его телефон на экран.

Посмотреть решение

index.js:

   window.onload = function()
   {
    document.forms[0].onsubmit = function()
    {
     if(!document.forms[0].userName.value)
     {
      document.forms[0].userName.focus();
      alert('Введите Ваше имя!');
      return false;
     }
     if(!document.forms[0].userPhone.value)
     {
      document.forms[0].userPhone.focus();
      alert('Введите Ваш телефон!');
      return false;
     }
    };
   };

action.html:

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Обработчик формы</title>
     <script src="action.js"></script>
    </head>
   
    <body>
     <div id="resultContainer"></div>
    </body>
   
   </html>

action.js:

   window.onload = function()
   {
    var searchString = window.location.search.substr(1);
    var getVariablesArray = searchString.split('&');
   
    getVariablesArray.forEach(function(getVariablePair)
    {
     getVariable = getVariablePair.split('=');
     switch(getVariable[0])
     {
      case 'userName':
       getVariable[0] = 'Имя: ';
       break;
   
      case 'userPhone':
       getVariable[0] = 'Телефон: ';
       break;
   
      default:
       break;
     }
     document.getElementById('resultContainer').innerHTML += getVariable[0]+decodeURIComponent(getVariable[1])+'<br>';
    });
   };

Результат:

Результат выполнения задания можно посмотреть здесь.