Fix inputs generated from button in form

Asked

Viewed 38 times

1

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

Follow 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

  • But do you want it to stay forever? In this case, you would have to keep it on the server. But for this type of storage, you can use localStorage or sessionStorage, depending on how you want it. Are you storing where? http://sbesc.lisha.ufsc.br/sbesc2014/dl234

  • @Rodrigorocha I am developing so that the inputs are read and used by a bot to answer given questions, so these fields have to stay until they are deleted. I thought of generating together with Row a button that would be responsible for deleting Row when it was no longer useful, but for now I need that after generated the fields remain after an F5 for example. And if the tab is closed, when it is opened again what was generated and not excluded remained. I don’t know if I can explain myself right, sorry

  • So. You have to store it somewhere, you know? For example, in a database or file on the server. On the client side you decide saving in session or in local storage, but it will only be in the current session or on the machine.

  • I get what you mean. Can you give me an example of how to start?

  • Do you use any back-end language? PHP, C#...

  • No back-end code yet, but I’m used to using PHP if that’s the question

  • So. You can store in the database. Every time you add it would save in the database. While deleting, you would delete.

Show 2 more comments

1 answer

0

You can save the generated fields in localStorage to recover them after 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 think of a logic to keep updating the localStorage during the actions of your application

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.