4

Tenho um campo chamado Quantidade que deve ser inserido a quantidade de produtos para venda. Meu formulário possui uma requisição de dados que retorna o valor e a quantidade de produtos em estoque, esse campo Quantidade retorna essa quantidade de estoque de produtos por causa do id="quantidade", então já recebe um valor.

Só que o campo Quantidade eu queria que tivesse um limite mínimo e máximo para a quantidade inserida utilizando min e max dentro desse <input>, colocando um código PHP dentro do max para definir a quantidade máxima digitada (o min pode ser zero).

Exemplo: Se o campo Quantidade recebe um valor de 30 produtos por causa da requisição de dados, esse campo deve permitir uma inserção de no mínimo 0 até no máximo 30, deixando o campo mais intuitivo.

Código JS que faz a requisição do valor no campo Quantidade

var retornoJson = JSON.parse(ajax.responseText);
document.querySelector("#quantidade").value = retornoJson[0].quantidade;

Código HTML:

<p> Quantidade: <input type="number" name="quantidade" id="quantidade" required=""> </p>
6
  • 1
    Existe, de fato, o tipo type="int" do <input> no HTML?
    – Woss
    Commented 10/02/2021 às 11:24
  • Sim, esse trecho de código <p> Quantidade </p> que eu postei, queria que ele fosse mais intuitivo no valor que ele recebe pra definir a quantidade digitada máxima permitida.
    – user219364
    Commented 10/02/2021 às 11:26
  • type="int"´´´ o <input>``` já possui, mas o usuário ele não sabe o valor mínimo é máximo para digitar nesse <input>, só retorna a quantidade de estoque de uma requisição de dados (ex: 30) queria que impedisse valores acima do permitido.
    – user219364
    Commented 10/02/2021 às 11:29
  • concordo com o@Woss, não conheço type=int, seria um type=number ai certo? developer.mozilla.org/pt-BR/docs/Web/HTML/Element/input Commented 10/02/2021 às 11:29
  • 1
    developer.mozilla.org/pt-BR/docs/Web/HTML/Element/… A questão é que int não é um tipo válido para o <input>; para valores numéricos deve-se usar number.
    – Woss
    Commented 10/02/2021 às 11:30

1 Resposta 1

6

Você não precisa do PHP para isso. Se você já faz a requisição para obter o valor, basta definí-lo com JavaScript mesmo:

const quantidade = document.getElementById("quantidade");

quantidade.min = 0
quantidade.max = 5;
input:invalid {
  border: 2px solid red;
}
Quantidade: <input type="number" id="quantidade">

Perceba que mesmo que o usuário consiga inserir um valor maior que o máximo definido, o campo passa a ser inválido de acordo com a API de validação do JavaScript, que pode ser comprovado pelo CSS adicionado, que faz com que o campo fique vermelho.

Outro campo legal que pode ser utilizado é o tipo range:

Quantidade: <input type="range" id="quantidade" min=0 max=5>

7
  • "min" e "max" tbm podem ser adicionados na tag input type=number, sem precisar de javascript: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number Commented 10/02/2021 às 11:32
  • @RicardoPontual Sim, mas ele recebe o valor de max via requisição a uma API no JS; não é fixo.
    – Woss
    Commented 10/02/2021 às 11:34
  • @Woss como impedir a alteração manual do primeiro código que usa JS? Meu campo Quantidade possui uma máscara em JS que impede quantidade acima de número de 4 dígitos.
    – user219364
    Commented 10/02/2021 às 11:37
  • O que seria "alteração manual"?
    – Woss
    Commented 10/02/2021 às 11:38
  • eu clicar sobre o campo e digitar um valor sem usar as setas do campo?
    – user219364
    Commented 10/02/2021 às 11:39

Você deve fazer log-in para responder a esta pergunta.