Estou com uma aplicaçao web que fiz um formularios simples pra guardar valores de um patchpanel e fiz um input dinamico que ao dizer a quantidade de portas que aquele patch tem, gerar automaticamente novos campos, exemplo, preenchi que o patch tem 5 portas, entao abaixo ele ja gera os 5 campos pra preencher o que cada porta esta conectado. A problematica, ao fazer isso e começar a preencher os campos ele ja salva normal, o problema é que se o usuario por algum motivo quiser aumentar ou diminuir o numero de portas e ja tiver preenchido alguns campos, nessa alteraçao de qtd de portas os campos preenchidos serao limpados.
NOTEI que precisei alterar o valor das portas, quero mais 1 portas. eu adiciono, porem limpa todos os campos preenchidos isso nao é interessante que aconteça no sistema, entao busco uma maneira de guardar os dados enquanto o usuario pode mudar o numero de portas.
<form>
<div class="form-group">
<label>Número de portas:</label> <input id="numporta" type="number"
name="patchpanel.numPortas" class="form-control"
value="${flash['patchpanel.numPortas'] ? flash['patchpanel.numPortas'] : p?.numPortas}" onchange="geraAlerta(this.value)">
<span class="alert-danger">#{error 'patchpanel.numPortas' /}</span>
</div>
<div class="inputs">
<label for="quantidade">Porta 1</label> <a href="javascript:void(0)" id="adicionarcampo"></a><br>
<input type="text" name="portas[0]" placeholder="Informe o equipamento contectado a porta" class="form-control" value="${flash['portas.descricao'] ? flash['portas.descricao'] : p?.descricao}"/>
</div><br>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Endereço IP:</label> <input type="text" name="patchpanel.ip"
class="form-control"
value="${flash['patchpanel.ip'] ? flash['patchpanel.ip'] : p?.ip}">
<span class="alert-danger">#{error 'patchpanel.ip' /}</span>
</div>
</form>
minha JS esta:
`var wrapper = $(".inputs");
var add_button = $("#adicionarcampo");
var x = 1;
function geraAlerta(max_fields){
//alert("Funfou porra!")
$(wrapper).html("")
for(x=0; x < max_fields; x++){
$(wrapper).append('<div><label>Porta '+ (x+1) +'</label><input type="text" name="portas['+ x +']"class="form-control" placeholder="Informe o equipamento contectado a porta" /></div>');
}
}
$(document).ready(function(){
$(add_button).click(function(e) {
e.preventDefault();
var length = wrapper.find("input:text.textAdded").length;
});
$(wrapper).on("click", ".remove_field", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
});`
});