从动态输入字段 JavaScript 读取文本
Posted
技术标签:
【中文标题】从动态输入字段 JavaScript 读取文本【英文标题】：Reading Text From Dynamic Input Field JavaScript 【发布时间】：2020-05-24 17:21:07 【问题描述】：我有一个网站，您可以在其中输入文本到输入字段，然后按“添加新行”以添加另一个输入字段。
当用户按下提交按钮时，我希望能够阅读文本字段中的所有文本，但我似乎无法弄清楚如何访问文本字段中的文本。
这是我的代码：
<head>
<script src = "https://code.jquery.com/jquery-3.3.1.min.js"
crossorigin="anonymous"> </script>
</head>
<script type ="text/javascript">
var array = []
var track = 0;
$(document).on("click", ".btn-add-row", function()
var row = $(".row").eq(0).clone().show();
$(".element-wrapper").append(row);
var ye = $(".element-wrapper")
)
$(document).on("click", ".btn-remove-row", function()
var index = $(".btn-remove-row").index(this);
$(".row").eq(index).remove();
)
</script>
<body>
<h1>upload file</h1>
<form method = "post" enctype="multipart/form-data" action = "/">
<input type = "file" name = "filename">
<input type = "submit" value = "upload">
</form>
<div class = "element-wrapper">
<div class = "row" style = "display: none;">
<input type = "text" placeholder = "Attribute" id = "ye">
<button class = "btn-remove-row">
Remove Row
</button>
</div>
</div>
<button class = "btn-add-row"> Add New Row </button>
</body>
</html>
还有一个与之配套的 CodePen： https://codepen.io/etills/pen/qBdEKPV
如果有人能告诉我当用户按下提交时如何从输入行中读取所有文本，我将不胜感激。 我最终想将文本放入一个数组并使用输入的文本制作一个 .txt 文件。
谢谢
【问题讨论】：
【参考方案1】：你需要这个选择器来捕获可见的文本框：
div.row:not([style='display: none;']) input[type=\"text\"]"
类似这样的：
$("form").on("submit", function(e)
e.preventDefault();
var inputs = document.querySelectorAll("div.row:not([style='display: none;']) input[type=\"text\"]");
var len = inputs.length;
for (var i = 0; i < len; i++)
array.push(
input: i,
value: inputs[i].value
);
console.log(array);
);
你会得到这个结果：
参见本例：
$(function()
var array = [];
var track = 0;
$(document).on("click", ".btn-add-row", function()
var row = $(".row").eq(0).clone().show();
$(".element-wrapper").append(row);
var ye = $(".element-wrapper")
);
$(document).on("click", ".btn-remove-row", function()
var index = $(".btn-remove-row").index(this);
$(".row").eq(index).remove();
);
$("form").on("submit", function(e)
e.preventDefault();
var inputs = document.querySelectorAll("div.row:not([style='display: none;']) input[type=\"text\"]");
var len = inputs.length;
for (var i = 0; i < len; i++)
array.push(
input: i,
value: inputs[i].value
);
console.log(array);
);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>upload file</h1>
<form method="post" enctype="multipart/form-data" action="/">
<input type="file" name="filename">
<input type="submit" value="upload">
</form>
<div class="element-wrapper">
<div class="row" style="display: none;">
<input type="text" placeholder="Attribute">
<button class="btn-remove-row">
Remove Row
</button>
</div>
</div>
<button class="btn-add-row"> Add New Row </button>记住：元素 ID 在页面中必须是唯一的。避免在<input type="text" placeholder="Attribute" id="ye"> 中使用相同的id="ye"。
【讨论】：
【参考方案2】：在提交时检查您想要的所有输入并收集它们的值。
$(document).on("click", "input[type=submit]", function(e)
e.preventDefault()
$('input[type=text]').each((i, input) =>
console.log(input.value)
)
)
示例：https://codepen.io/jzabala/pen/vYOErpa?editors=1111
【讨论】：
以上是关于从动态输入字段 JavaScript 读取文本的主要内容，如果未能解决你的问题，请参考以下文章
如何从另一个输入文本字段Javascript中输入的值将值设置为输入隐藏字段