Pure Javascript
onchange - the event occurs when the value of an element is changed
function criarInputs() {
//recupera o valor do option selecionado (n)
let select = document.getElementById('valores5');
let n = select.options[select.selectedIndex].value;
let campos=""
for (i = 0; i < n; i++) {
//só pra ver no console.log
console.log('<input class="form-control" value="" type="text" name="nome"><input class="form-control" value="" type="text" name="cpf"><input class="form-control" value="" type="text" name="tel">');
}
}
<select id="valores5" class="valores1 form-control" name="npax" onchange="criarInputs()">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="5">6</option>
<option value="6">7</option>
<option value="7">8</option>
<option value="8">9</option>
</select>
Note that in the inputs the attribute “name”
has the same value for each new set added.
To simplify imagine the following form:
<form id='form' action="teste.php" method="POST">
<input type="text" name="nome" value='nome1'>
<input type="text" name="nome" value='nome2'>
<button type="submit"> Enviar </button>
</form>
After making the request, in the.php test I display the information that came from the form and the return is this:
Array ( [nome] => nome2 ) 1
Note that although I have two input’s on the form, only one was sent to me. This is because when a form is submitted and it has several input’s with the attribute value “name”
equal, only the latter is considered.
To solve this
So that all input’s with the same attribute value “name”
are delivered after request, just add brackets next to the attribute value “name”
. Example:
<input type="text" name="nome[]" value='nome1'>
<input type="text" name="nome[]" value='nome2'>
Your code would have to be
function criarInputs() {
//recupera o valor do option selecionado (n)
let select = document.getElementById('valores5');
let n = select.options[select.selectedIndex].value;
let campos="";
for (i = 0; i < n; i++) {
if (n>1){
console.log('<input class="form-control" value="" type="text" name="nome[]"><input class="form-control" value="" type="text" name="cpf[]"><input class="form-control" value="" type="text" name="tel[]">');
}else{
console.log('<input class="form-control" value="" type="text" name="nome"><input class="form-control" value="" type="text" name="cpf"><input class="form-control" value="" type="text" name="tel">');
}
}
document.getElementById("demo").innerHTML = campos;
}
<select id="valores5" class="valores1 form-control" name="npax" onchange="criarInputs()">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="5">6</option>
<option value="6">7</option>
<option value="7">8</option>
<option value="8">9</option>
</select>
<div id="demo"></div>
For there to be no doubt as to the comment "Quase isso.... só que se eu escolher o numero 4 e depois trocar um menor tipo o 2 ele esta somando 4 mais 2 ao invés de remover"
Let’s run without console.
function criarInputs() {
//recupera o valor do option selecionado (n)
let select = document.getElementById('valores5');
let n = select.options[select.selectedIndex].value;
let campos="";
for (i = 0; i < n; i++) {
if (n>1){
campos +='<input class="form-control" value="" type="text" name="nome[]"><input class="form-control" value="" type="text" name="cpf[]"><input class="form-control" value="" type="text" name="tel[]"><br><br>';
}else{
campos +='<input class="form-control" value="" type="text" name="nome"><input class="form-control" value="" type="text" name="cpf"><input class="form-control" value="" type="text" name="tel"><br><br>';
}
}
document.getElementById("demo").innerHTML = campos;
}
<select id="valores5" class="valores1 form-control" name="npax" onchange="criarInputs()">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="5">6</option>
<option value="6">7</option>
<option value="7">8</option>
<option value="8">9</option>
</select>
<div id="demo"></div>
I think I got it wrong, you want me to repeat this set (3) of inputs as many times as the value of the option?
– user60252
exact ... repeat the set
– Fabio Henrique
edited the answer
– user60252