如何獲取動態生成的文本框的輸入值？
[英]how to get the input value of dynamically generated textboxes?
問題描述
我有一個添加文本區域的按鈕，但是如何從文本區域檢索值。 我嘗試使用
document.getElementById('newutterances').value;
但它不起作用。
請幫忙，因為我是JavaScript新手。
<html> <body> <div id="newutterance"></div> <input type="button" value="Add Text Area" onClick="addTextArea();"> <button type="button" onClick="getValue()">Get Value</button> <script type="text/javascript"> function addTextArea() { var intTextBox = 0; intTextBox++; var objNewDiv = document.createElement('div'); objNewDiv.setAttribute('id', 'div_' + intTextBox); objNewDiv.innerHTML = 'Textbox ' + intTextBox + ': <input type="text" id="tb_' + intTextBox + '" name="tb_"/>'; document.getElementById('newutterance').appendChild(objNewDiv); } </script> <script type="text/javascript"> function getValue() { var value = document.getElementById('newutterance'); return value; } </script> </body> </html>
2 個解決方案
解決方案1
0 已采納 2017-04-03 11:30:16
為字段添加一些類，並使用document.getElementsByClass() ;
<script type="text/javascript">
var count = 0;
function addTextArea() {
count++;
var objNewDiv = document.createElement('div');
objNewDiv.innerHTML = 'Textbox ' + count + ': <input type="text" class="field" name="tb_"/>';
document.getElementById('newutterance').appendChild(objNewDiv);
}
function getValue() {
var fields = document.getElementsByClassName('field');
var values = [];
for (var i = 0; i < fields.length; i++) {
values.push(fields[i].value);
}
return values;
}
</script>
解決方案2
0 2017-04-03 11:34:54
在下面的代碼片段中，我獲得了您創建的輸入字段的值，並使用console.log（）將其打印出來。
var button = document.querySelector('button');
button.addEventListener('click', function() {
var input = document.querySelector('#newutterance input[type="text"]');
var inputValue = input.value;
console.log(inputValue);
});
<html> <body> <div id="newutterance"></div> <input type="button" value="Add Text Area" onClick="addTextArea();"> <button type="button">Get Value</button> <script type="text/javascript"> function addTextArea() { var intTextBox = 0; intTextBox++; var objNewDiv = document.createElement('div'); objNewDiv.setAttribute('id', 'div_' + intTextBox); objNewDiv.innerHTML = 'Textbox ' + intTextBox + ': <input type="text" id="tb_' + intTextBox + '" name="tb_"/>'; document.getElementById('newutterance').appendChild(objNewDiv); } var button = document.querySelector('button'); button.addEventListener('click', function() { var input = document.querySelector('#newutterance input[type="text"]'); var inputValue = input.value; console.log(inputValue); }); </script> </body> </html>
如何獲取動態生成的多個文本框的值？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.