Para criar elementos com JQuery, você pode utilizar do método append
, e para retornar o valor presente no input, você utiliza do método val
.
Então no click do botão inserir, pegamos o valor, verificamos o mesmo, pois o input pode estar vazio, caso esteja válido, efetuamos um loop criando campo a campo.
Veja abaixo um exemplo:
$(function() {
$("#inserir").click( () => {
let quantidade = $("#quantidade").val();
if (quantidade) {
quantidade = parseInt(quantidade);
for (let i=0; i < quantidade; i++) {
$("body").append(`<input type="number">`);
}
}
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title> UpFlow.me </title>
</head>
<body style="background-color:powderblue;">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2> Adicionar Campos</h2>
<input id="quantidade" type="text" name="visor" /> <br/>
<input id="inserir" type="button" value="inserir" />
</body>
</html>
Alterando um pouco mais seu HTML, podemos criar uma div
ou um form
que será onde os campos serão criados, dessa forma nós podemos limpar esse elemento sempre que o botão for clicado, evitando assim a constate soma de inputs:
$(function() {
$("#inserir").click( () => {
let quantidade = $("#quantidade").val();
const campos = $("#campos");
if (quantidade) {
quantidade = parseInt(quantidade);
campos.empty();
for (let i=0; i < quantidade; i++) {
campos.append(`<input type="number">`);
}
}
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title> UpFlow.me </title>
</head>
<body style="background-color:powderblue;">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2> Adicionar Campos</h2>
<input id="quantidade" type="text" name="visor" /> <br/>
<input id="inserir" type="button" value="inserir" />
<div id="campos"></div>
</body>
</html>
Para esse limpeza, utilizamos do método empty
.
Para pegar os valores de todos os novos inputs e somar, existem algumas formas, vou colocar como exemplo uma em que os inputs são criados com uma classe específica, assim com JQuery eu busco todos esses inputs por essa classe e somo seus respectivos valores utilizando do método each
do JQuery:
$(function() {
$("#inserir").click( () => {
let quantidade = $("#quantidade").val();
const campos = $("#campos");
if (quantidade) {
quantidade = parseInt(quantidade);
campos.empty();
for (let i=0; i < quantidade; i++) {
campos.append(`<input class="soma" type="number">`);
}
if (quantidade > 0) {
campos.append(`<input type="button" id="somar" value="somar" onclick="Somar()">`);
}
}
});
});
function Somar() {
const inputs = $(".soma");
let total = 0;
inputs.each( (index, element) => {
if ($(element).val()) {
total += parseInt($(element).val());
}
});
console.log(total);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title> UpFlow.me </title>
</head>
<body style="background-color:powderblue;">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2> Adicionar Campos</h2>
<input id="quantidade" type="text" name="visor" /> <br/>
<input id="inserir" type="button" value="inserir" />
<div id="campos"></div>
</body>
</html>
Referências:
https://api.jquery.com/append/
https://api.jquery.com/ready/
https://api.jquery.com/val/
https://api.jquery.com/empty/
https://api.jquery.com/each/