How to generate multiple inputs within a loop of repetition

Question

How to generate multiple inputs within a loop of repetition

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)

2

I need to create inputs based on the amount the user types.

For example:

var quantidade = 5; \\usuario digitou

for(int i = 0; i< quantidade; i++){
   //aqui vem os inputs
}

In this case I would also need to change the name of each input to then send by the POST method to put in a Database.

That's the logic I found, I'm open to others. Here is the problem statement:

Class name insertion page and number of students

Page containing an HTML form with fields:

Student name
Note 1
Note 2
Note 3

php javascript

asked by anonymous 02.11.2018 / 01:35

3 answers

1

Look, I do not think my answer will completely solve your problem because I'm not very advanced with js, but I can give you an idea how to do this for the knowledge I have:

The first image is the code and the second is the result in html.

In js I'm first getting the value entered by the user in the loop I'm selecting the div that I'm going to add the inputs that in the case is the with "id" inputs. After that I'm creating an input element and adding the attributes name and id in them. Then I give an append to the div causing the inputs to be added in the html.

<formaction="pagina_destino" method="post">
<div id="mydiv">

</div>
</form>


var quantidade = 3
for(i = 0; i< quantidade; i++){

var x=document.getElementById('mydiv')

var y = document.createElement("input")
y.setAttribute("name", 'input${i}')
y.setAttribute("type", "text")

x.appendChild(y)
}

02.11.2018 / 02:29

1

I ended up using PHP myself, but the two answers helped me a lot in another part of the program that I need to build by Javascript , thank you!

>

Follow the solution code snippet:

<form class="needs-validation" novalidate name="frmCadastroDeTurma" method="POST" action="inserirNotas.php">
      <?php
            $j = 0; $a = 1;
            for ($i = 0; $i < $_SESSION['qtdAlunos']; $i++){
        ?>
        <div class="row">

          <div class="col-md-6 mb-3">
            <label for="Nome da Turma">Nome do Aluno</label>
            <input type="text" class="form-control"  placeholder="" value="" required name="<?php echo "nomeAluno" . $i; ?>">
            <div class="invalid-feedback">
               Nome do Aluno é requirido.
            </div>
            <label class="tituloAluno" ><?php echo "ALUNO    " . $a++;?></label>

          </div>
          <div class="col-md-6 mb-5">
            <label for="Primeira Nota">Primeira Nota</label>
            <input type="text" class="form-control" onkeyup="somenteNumeros(this);"  placeholder="" value="" required name="<?php echo "primeiraNota" . $j++; ?>">
            <div class="invalid-feedback">
               Primeira nota é requirida.
            </div>
            <hr class="hrInputs" >
            <label for="Segunda Nota">Segunda Nota</label>
            <input type="text" class="form-control" onkeyup="somenteNumeros(this);"  placeholder="" value="" required name="<?php echo "segundaNota" . $j++; ?>">
            <div class="invalid-feedback">
               Segunda Nota é requirida.
            </div>
            <hr class="hrInputs">
            <label for="Terceira Nota">Terceira Nota</label>
            <input type="text" class="form-control" onkeyup="somenteNumeros(this);"  placeholder="" value="" required name="<?php echo "terceiraNota" . $j++; ?>">
            <div class="invalid-feedback">
               Terceira nota é requirida.
            </div>
            <hr class="hrInputs">
          </div>

        </div>
        <hr class="hrDivisor">
        <?php 
            }
        ?>


        <button class="btn btn-primary btn-lg btn-block" type="submit">Salvar</button>

      </form>

I used Bootstrap and Jquery for styling.

03.11.2018 / 12:27

Substitution in a text by words from another file How to replace a space with a semicolon between two words with gsub ()

score 2 · Accepted Answer

Names will be A0 , A1 , A2 etc ...

    
var quantidade = 5;

for(i = 0; i< quantidade; i++){

   var x=document.getElementById('myTable').insertRow(0);
   
    var y=x.insertCell(0);
    
    y.innerHTML="<input type=text name=A" + i + ">";
}

<form action="pagina_destino" method="post">
<table id="myTable" border="0">
    <tr>
    <td></td>
    </tr>
</table>
</form>

insertRow - inserts a new row

insertCell - inserts a <td> with some content in it.

With javascript and within div

    var quantidade = 5;
    var conteudo="";
    for(i = 0; i< quantidade; i++){
        conteudo +=('<input type="text" name="A'+i+'"/>');
    };

    document.getElementById("demo").innerHTML=conteudo;

<form action="" method="post">
    <div id="demo"></div>
    <input type="submit">
</form>

With jquery

var quantidade = 5;
var conteudo="";
    	
for(i = 0; i< quantidade; i++){
    	    
    conteudo +='<input type="text" name="A'+i+'"/><br>';
    	         
};
    	     
$('.container').append(conteudo);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formaction="" method="post">
   <div class="container"></div>
   <input type="submit">
</form>