Разделяем получение и отправку формы в Express

Пусть у нас есть форма, отправляющаяся на текущую страницу:

form.hbs<form method="GET">
  <input name="test1">
  <input name="test2">
  <input type="submit">
</form>

Напишем обработчик этой формы:

index.jsapp.get('/', function(req, res) {
  res.render('result');
});

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

Очевидно, что для проверки нам нужно использовать req.query:

index.jsapp.get('/', function(req, res) {
  console.log(req.query); // выведет {} или объект с данными
  res.render('result');
});

Есть, однако, проблема. В req.query всегда находится объект - или пустой, или заполненный. А объекты всегда равны true. Поэтому следующая проверка не будет работать:

index.jsapp.get('/', function(req, res) {
  if (req.query) {
    res.render('form');
  } else {
    res.render('result');
  }
});

Давайте сделаем работающую проверку.

Первый вариант

Можно проверять наличие каждого поля в объекте с результатом:

index.jsapp.get('/', function(req, res) {
  if (req.query.test1 && req.query.test2) {
    res.render('form');
  } else {
    res.render('result');
  }
});

Этот вариант, однако, имеет недостатки. Написанная нами проверка не пропустит пустое значение инпута, так как оно приводится к false. Исправим проблему:

index.jsapp.get('/', function(req, res) {
  if (req.query.test1 !== undefined && req.query.test2 !== undefined) {
    res.render('form');
  } else {
    res.render('result');
  }
});

Однако, способ все равно остается неудобным, так как в проверке нужно перечислить все инпуты формы. Получится, что если у нас пять инпутов - то в условие нужно будет проверять все эти пять инпутов. Неудобно.

Второй вариант

Описанное неудобство имеет классическое решение - нужно дать кнопке отправке имя:

form.hbs<form action="" method="GET">
  <input name="test1">
  <input name="test2">
  <input type="submit" name="submit">
</form>

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

index.jsapp.get('/', function(req, res) {
  if (req.query.submit) {
    res.render('result');
  } else {
    res.render('form');
  }
});

Практические задачи

Задание 1

С помощью формы спросите у пользователя пять чисел. После отправки формы выведите на экран сумму этих чисел.