1

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. inserir a descrição da imagem aqui

NOTEI que precisei alterar o valor das portas, quero mais 1 portas. eu adiciono, porem limpa todos os campos preenchidos inserir a descrição da imagem aqui 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--;
});`
});

1 Resposta 1

2

Veja se isso lhe ajuda:

var Campos = {};
Campos.add = function(i){
  while (i--) {
    Campos.container = $(".inputs");
    var qnt = Campos.container.find('section').length;
    var html = '';
    html += '<section>';
      html += '<label>Porta '+ (qnt + 1) +':</label> ';
      html += '<input type="text" name="portas[]" id="numPortas" class="form-control" placeholder="Informe o equipamento contectado a porta">';
      //html += '<br>';
    html += '</section>';
    
    Campos.container.append(html);
  }
};
Campos.remove = function(i){
  while (i--) {
    Campos.container = $(".inputs");
    Campos.container.find('section:last').remove();
  }
};


$("#numporta").on('change', function(){
  var i = $(this).val();
  var qnt = $(".inputs").find('section').length;
  
  if (qnt < i) {
    Campos.add(i - qnt);
  }else{
    Campos.remove(qnt - i);
  }
});
#formQuantidade {
  margin-top: 10px;
}

.inputs section {
  margin-top: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <!-- Informando Quantidade -->
  <form id="formQuantidade"> 
    <div class="form-group">
      <label>Número de portas:</label>       
      <input id="numporta" type="number" name="numPortas" class="form-control">
    </div>
    <div class="inputs">
      <!-- Os campos são adicionados aqui dentro -->
    </div>
  </form>
</div>

4

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .