Question

我正在制作一个可以添加额外输入字段的表单。这是代码：

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/

我的问题是，每次添加新字段时，前一个字段的值都会消失。我该如何保留这些价值？

感谢您的阅读。干杯！

Answer 1

<强> fiddle

您在同一页#front和#back上不能拥有多个ID 你的问题是你正在重置和元素的innerHTML - 丢失输入状态和值

而是使用https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
使用beforeend属性，您只需将追加新创建的元素添加到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>

您的另一个问题是“为什么您无法在之后设置<script>功能（就像之前的</body>那样）调用onclick事件的按钮“：
这是解析时的原因onclick="add_fields();"无法找到要绑定的函数。像我一样使用，保持模板清理内联JS，并使用事件委派addEventListener

Answer 2

你可以尝试，

HTML：

<div class="wrapper-comp-setting" id="flashcard-list">
    <div class="fc-item" data-index='1'>
      <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>
</div>
<input type="button" id="more_fields" value="Add flashcard" />

使用Javascript：

$('#more_fields').click(function() {
    var x = $('#flashcard-list');
    var last_row_index = $('#flashcard-list div').last().data('index');
    var new_no = last_row_index + 1;
    var newrow = $('#flashcard-list div').last().clone(true);
    newrow.data('index', new_no);
    newrow.find('.label').text('Flashcard ' + '(' + new_no + ')');
    newrow.find('input').val('');
    x.append(newrow);
});

http://codepen.io/anon/pen/yNXxQP

Answer 3

你可以试试jQuery insertAfter（）方法

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("<span>data inserted here</span>").insertAfter("p");
    });
});
</script>
</head>
<body>

<button>Insert value</button>

<p>one.</p>
<p>two.</p>

</body>
</html>

Answer 4

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- had to put the script here because I was getting a "add_fields() not defined" error. Anybody knows why? -->
<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" />

＆＃13;

{{1}}

＆＃13;

并使用jquery代码，这也不是很棘手比如Javascript。它的工作很好，很遗憾在jquery中做出贡献。

动态添加输入字段后保留输入值

4 个答案: