Обрабатываем форму

Итак, у нас есть форма, но она пока ничего не делает. Давайте добавим обработчик этой формы

Добавим в самый низ нашего файла обработчик, который просто возвращает то, что ему пришлет форма

const addRoute = app.post('/add', async(ctx,req) => {
  return req.body
})

Мы определили маршрут с адресом plugin/index~add, если на него отправить post-запрос - он просто вернет то что ему отправили.

Давайте направим нашу форму на этот адрес, пропишем в наш тег form свойство method='post' и в свойтсво action указатель на этот route, в фигурных скобках, потому что мы подставим в него переменную

<form method='post' action={addRoute.url()}>

Заодно, добавим в наши теги Input свойства required и type='number', чтобы браузер

Код, который у нас должен получиться, выглядит так:

import {jsx} from '@app/html-jsx'
import {PluginLayout} from '@html/layout'
import {Container, FormRow, Input, Button} from '@html/ui'

const mainPage = app.html('/', async(ctx,req) => {

  return <PluginLayout ctx={ctx}>
    <Container padding='xl' width='sm'>
      <h1>График ИМТ</h1>
      <form method='post' action={addRoute.url()}>
        <FormRow label='Рост' description='в сантиметрах'>
          <Input type='number' name='height'/>
        </FormRow>
        <FormRow label='Вес' description='в килограммах'>
          <Input type='number' name='weight'/>
        </FormRow>
        <FormRow>
          <Button type='submit' primary>Добавить запись</Button>
        </FormRow>
      </form>
    </Container>
  </PluginLayout>
})

const addRoute = app.post('/add', async(ctx,req) => {
  return req.body
})

Введем свой рост и вес, нажмем на кнопку "Отправить" и посмотрим как выглядит результат

Мы видим что в req.body пришли данные из формы. У нас есть рост и вес пользователя, давайте рассчитаем индекс массы тела и выведем его

const addRoute = app.post('/add', async(ctx,req) => {
  // считаем рост в сантиметрах
  const height = Number.parseFloat(req.body.height) / 100
  // вес в килограммах
  const weight = Number.parseFloat(req.body.weight)
  // считаем индекс масы тела по формуле
  const imt = weight / (height*height)   
  
  // вернем результат
  return {
    imt: imt 
  }
})

Теперь еще раз отправим форму и посмотрим что выдаст нам скрипт

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

Следующий урок: Добавляем записи в таблицу