Задание:
Есть
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>';
});
};
Результат:
Результат выполнения задания можно посмотреть
здесь.