[英]how to get the input value of dynamically generated textboxes?
I have a button to add textarea, but how to retrieve values from the text areas. 我有一个添加文本区域的按钮,但是如何从文本区域检索值。 I have tried using
我尝试使用
document.getElementById('newutterances').value;
but its not working. 但它不起作用。
Please help, as I am new to JavaScript. 请帮忙,因为我是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>
Add some class for fields and use document.getElementsByClass()
; 为字段添加一些类,并使用
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>
With this code snippet below, I get the value of your input field, which you've created, and print it using console.log(). 在下面的代码片段中,我获得了您创建的输入字段的值,并使用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.