Save values temporarily in text fields (inputs)

Question

Save values temporarily in text fields (inputs)

Navigation

#1 by (2 votes)

1

I have a web application that I made a simple forms to store values of a patchpanel and I made a dynamic input that when saying how many ports that patch has, automatically generate new fields, eg I filled out that the patch has 5 ports , so below it it generates the 5 fields to fill what each port is connected to. The problem is that if you do this and start filling in the fields it already saved normal, the problem is that if the user for some reason wants to increase or decrease the number of ports and already filled some fields, in this change of ports qtd fields will be cleaned.

InoticedthatIneededtochangethevalueoftheports,Iwant1moreports.Iadd,butcleanallfilledfields thisisnotinterestingthathappensinthesystem,soIlookforawaytosavethedatawhiletheusercanchangethenumberofports.

<form><divclass="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 is:

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

jquery play-framework

asked by anonymous 13.07.2017 / 17:20

1 answer

How to do a fade in on page load? How to redirect in the first access another page instead of the index?

score 2 · Accepted Answer

See if this helps:

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><scriptsrc="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>