Dynamically generate input - html, javascript and Jquery

Asked

Viewed 250 times

0

Friends, I need to receive a numerical value and from that input, automatically generate the input.

For example, type 5, and the program generates 5 input for numeric input.

What I have of code is basically, a field to insert the input, I have knowledge only in c# and Java, so the difficulty with html and javascript and Jquery:

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="UTF-8"/>     
        <title> UpFlow.me </title>              
    </head>

    <body>
        <body style="background-color:powderblue;">
            <h2>  Adicionar Campos</h2>
        <input type="text" name="visor" /> <br/>
            <input type="button" value="inserir" />

    </body> 

</html>
javascript html jquery

1 answer

1

To create elements with Jquery, you can use the method append, and to return the value present in the input, you use the method val.

Then at the click of the insert button, we take the value, we check it, because the input may be empty, if valid, we make a loop creating field by field.

See below for an example:

$(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>

By changing your HTML a little more, we can create a div or a form which will be where the fields will be created, this way we can clean this element whenever the button is clicked, thus avoiding the checksum of 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>

For this cleaning, we use the method empty.

To take the values of all new inputs and add, there are some ways, I will put as an example one where inputs are created with a specific class, so with Jquery I search all these inputs for this class and add their respective values using the method each 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>

References:

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/

  • Perfect, in case to conclude I would need to add the entries in the new inputs, for example: we have 3 inputs, enter the number in 10 in each one and return 30.com which I have in mind, in c# I would think of something like storing the numbers in an array and return the result, how the syntax would be with javascript and jquery?

  • 1

    @galegoz const campos = Array.from(document.querySelector('#campos').children);&#xA; const total = campos&#xA; .map(input => Number(input.value))&#xA; .reduce((acc, cur) => cur + acc);

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.