2
respostas

Criando formulário HTML dinamicamente

Eu já tinha feito no PHP uma função que criava dinamicamente um formulário na tela, com os elementos inputs (text, number, textarea, image, etc.) adicionados conforme os tipos dos dados fornecidos por um json.

Naquela época, eu calculei a quantidade de linhas na tela que um elemento ocupava e, com isso, eu evitava de adicionar mais elementos do que a tela comportasse verticalmente.

Desse modo, caso meu formulário fosse muito grande, eu o paginava para o usuário preencher os primeiros campos da tela e, após preenchidos e validados, ele clicaria no botão com seta à direita e um novo formulário seria exibido com os próximos campos a serem preenchidos.

Somente no último formulário, os botões de confirmar e cancelar estariam disponíveis para o usuário finalizar a inclusão ou alteração.

A pergunta que não quer calar, já que agora meu mundo é o javascript e não mais o PHP, é: existe um meio em javascript de eu prever quantas linhas um formulário ocupará na tela ou se houve overflow na tela, para que eu possa paginá-la como fiz anteriormente?

2 respostas

Oi João,

Há algumas formas de paginar dados sim. O melhor caso é trazer as informações já paginadas do backend, se no caso você estiver consumindo uma API que já tenha o recurso de paginação implementado. Porém, se você estiver trabalhando com um JSON local, é possível "cortar" o array de dados usando, por exemplo, métodos como Array.slice(), que retorna uma "cópia" de um array cortado a partir de um determinado índice, ou entre dois índices.

Espero ter ajudado!

Bons estudos ;)

Não é exatamente isso que eu quis perguntar.

O que quis dizer é:

1) tenho uma tabela em que cada linha tem 25 colunas.

2) ao exibir os inputs dessas linhas na tela, alguns inputs ultrapassarão o limite da página, ativando o overflow e a barra de rolagem lateral.

3) a pergunta é: tem como eu detectar que o limite da página foi atingido e assim evitar de renderizar mais inputs, deixando-os para uma segunda página, por exemplo, a qual seria exibida com os inputs restantes para o usuário preencher?