動態添加輸入字段後保留輸入值

我正在製作一個表單，可以添加額外的輸入字段。下面的代碼：動態添加輸入字段後保留輸入值

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/

我的問題是，我每次添加一個新的領域，從以前的字段中的值時消失。我如何保存這些值？

謝謝您的閱讀。乾杯！

來源

2015-06-12 Vedran

你不應該創建具有相同ID的元素。 ID必須是唯一的。 – Zee

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

來源

2015-06-12 08:19:05

作品，謝謝！ Hvala :) – Vedran

@Vedran不用客氣！ * Molim;）* –

-1

你可以嘗試的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>

來源

2015-06-12 08:16:26

正如我對Runny所說的那樣，jQuery總是一個很好用的庫，但我們首先在指定的標籤上提供答案 - 在建議JS庫，如jQuery，Mootools等等等之前......也有時加載一個巨大的圖書館，而不是使用普通的JavaScript並不是一個好建議......依賴，你有想法。 –

-1

Here is the code

http://jsfiddle.net/hmxdmaL8/3/

，並使用此jQuery代碼過於它不棘手，因爲例如Javascript。它的工作很好，併爲jquery貢獻感到遺憾。

來源

2015-06-12 08:35:54 Runny

請避免回答jQuery中特定JS標記的問題。嘗試在您的問題中提供代碼。 jsFiddle與StackOverflow沒有關係。如果它關閉它的服務或鏈接去世，你的問題在任何情況下都是無用的。 –

@ Roko我知道你生病了嗎？當然，但是我已經給出了替代和簡單的一個，你呢？我已經通知 – Runny

Runny，StackOverflow是用來尋找問題的答案。我們負擔不起人們尋找一個香草JS答案，並最終閱讀一堆只使用jQuery的答案。還有其他方法可以在JavaScript中實現上述功能，如果你涉及這些情況，我認爲你不會得到那種令人討厭的downvote :( –

你可以試試，

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

來源

2015-06-12 10:18:24 Twinkle

jQuery = Javascript，但這個問題被標記爲JavaScript和JavaScript！= jQuery-嘗試總是提供一個JS解決方案之前建議外部庫的問題 –

感謝您的意見@Roko，我將從下次開始。我是一個新的bie。 – Twinkle

動態添加輸入字段後保留輸入值

回答

相關問題