Pitch inputs generated from button on form

Question

Pitch inputs generated from button on form

Navigation

#1 by (0 votes)

1

I have the following problem: I created a button that generates two input fields inside a form, the problem is that when the refresh page the generated fields disappear. I would like to know how do I make them once generated remain in the form until they are deleted via exclusion button (Still to be developed ^^ ")

Here are the codes:

var line = 1;

function addInput(divName) {
    var newdiv = document.createElement('div');
    
    newdiv.innerHTML  = '['+line +']';
    newdiv.innerHTML += '<div class="row"><div class="col-md-6"><label>Quando alguém disser:</label><input type="text" name="leitura'+line +'_1" id="leitura'+line +'_1"><br></div><div class="col-md-6"><label>O bot deve responder:</label><input type="text" name="resposta'+line +'_2" id="resposta'+line +'_2"><br></div></div><br>';
      
    document.getElementById(divName).appendChild(newdiv);
    line++;
}

addInput('lines');

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container">
    <div class="row">
        <div class="col-xl-8 offset-xl-2 py-3">
            <form id="form">
                <button type="button" onclick="addInput('lines')">+ Adicionar Resposta</button>
                <br><br>
                <div id="lines"></div>		
            </form>
        </div>
    </div>
</div>

javascript

asked by anonymous 25.10.2018 / 20:11

1 answer

dataGridView with line break, however when exporting to excel it does not break RecyclerView with the show button more

score 0 · Answer 1

You can save the generated fields in the localStorage to recover them after the refresh

function addInput(divName) {
     var newdiv = document.createElement('div');

     newdiv.innerHTML  = '['+line +']';
     newdiv.innerHTML += '<div class="row"><div class="col-md-6"><label>Quando alguém disser:</label><input type="text" name="leitura'+line +'_1" id="leitura'+line +'_1"><br></div><div class="col-md-6"><label>O bot deve responder:</label><input type="text" name="resposta'+line +'_2" id="resposta'+line +'_2"><br></div></div><br>';
     document.getElementById(divName).appendChild(newdiv);

     localStorage.setItem(divName, document.getElementById(divName).innerHTML); //<- add no localStorage
     line++;
}


addInput('lines');
var inputs = localStorage.getItem('lines'); // <- recuperando dados no localStorage

After this, you need to create a logic to update the localStorage during the actions of your application