Store values temporarily in text fields (inputs)

Question

I’m with a web application that I made a simple filter to store values of a patchpanel and I made a dynamic input that by telling the amount of ports that that patch has, automatically generate new fields, example, I filled that the patch has 5 ports, then below it already generates the 5 fields to fill in what each port is connected. The problem, when doing this and starting to fill the fields it already saves normal, the problem is that if the user for some reason wants to increase or decrease the number of ports and has already filled some fields, in this change of Qtd of doors the fields filled will be cleaned.

I noticed that I needed to change the value of the ports, I want 1 more ports. I add, but clean all filled fields this is not interesting to happen in the system, so I look for a way to save the data while the user can change the number of ports.

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

my JS this:

`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--;
});`
});

Answer 1

See if it helps you:

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>