Preserve input values after dynamically adding an input field

Question

I'm making a form where it's possible to add extra input fields. Here's the code:

HTML:

<div class="wrapper-comp-setting" id="flashcard-list">
        <div class="fc-item">
          <label class="label setting-label" for="flashcards">Flashcard (1)</label>
          <input class="input setting-input" name="front" id="front" placeholder="Front" type="text" />
          <input class="input setting-input" name="back" id="back" placeholder="Back" type="text" />
        </div>
</div>
<input type="button" id="more_fields" onclick="add_fields();" value="Add flashcard" />

JS:

var fc_number = 1;
function add_fields() {
    fc_number++;
    document.getElementById('flashcard-list').innerHTML += '<div class="fc-item"><label class="label setting-label" for="flashcards">Flashcard (' + fc_number + ')</label> <input class="input setting-input" name="front" id="front" placeholder="Front" type="text" />\n<input class="input setting-input" name="back" id="back" placeholder="Back" type="text" /></div>\r\n';
}

http://jsfiddle.net/hmxdmaL8/

My problem is that every time I add a new field the values from the previous fields disappear. How can I preserve those values?

Thank you for reading. Cheers!

Answer 1

fiddle

You cannot have multiple ID on the same page #front and #back.
Your issue is that you're resetting and element's innerHTML - loosing the input states and values

Instead use https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
with the beforeend property, that way you'll simply append new created elements to the DOM

<div class="wrapper-comp-setting" id="flashcard-list">

    <div class="fc-item">
        <label class="label setting-label" for="flashcards">Flashcard (1)</label>
        <input class="input setting-input" name="front" placeholder="Front" type="text" />
        <input class="input setting-input" name="back"  placeholder="Back" type="text" />
    </div>

    <!-- use insertAdjacentHTML on #flashcard-list -->    

</div>
<input type="button" id="more_fields" value="Add flashcard" />

<script>
    var addFieldButton = document.getElementById("more_fields");
    var flashCardList  = document.getElementById('flashcard-list')
    var fc_number = 1;

    function add_fields() {
        fc_number++;
        var fields = '<div class="fc-item">\n\
        <label class="label setting-label" for="flashcards">Flashcard (' + fc_number + ')</label>\n\
        <input class="input setting-input" name="front" placeholder="Front" type="text" />\n\
        <input class="input setting-input" name="back" placeholder="Back" type="text" />\n\
        </div>';
        flashCardList.insertAdjacentHTML("beforeend", fields );
    }

    addFieldButton.addEventListener("click", add_fields);
</script>

Your other question was "why you cannot set <script> with your function after (like before </body> as you should) the button calling the onclick event":
that's cause on parse-time the onclick="add_fields();" could not find that function to be bound to. Use like I did, keeping your template clean of inline JS, and using event delegation with addEventListener