如何通过JavaScript中的按钮从动态创建的文本输入框中提取文本值？

Question

我需要有关正确提取输入到“文本框”中的“值”的帮助，该“文本框”是根据所需的用户输入动态创建的。 我现在的问题是我的“打印usr”按钮没有调用函数以打印出键入文本框中的值。 我在控制台中没有收到任何错误，因此我对为什么它无法正常工作感到困惑。

我非常感谢您提供帮助，可以完全更改代码，或者只是告诉我我做错了什么以及如何解决它！

这是目前使用我的HTML和JS代码与GUI配合使用的一般思路：

HTML：

<html>
<head>
    <script src="elemCreator.js"></script>
</head>

<body>
    <b>Input # of users:</b>
    <form id="usr_form" name="usr_form" method="get" action="mainmenu.html" onsubmit="elemCreator.createUserEntry(document.usr_form.usr_num.value);return false;">
        <input type="text" name="usr_num">
        <input type="submit" value="Submit">
    </form>
</body>
</html>

JavaScript：

function elementCreator () {
    this.usrList = [];
}

var elemCreator = new elementCreator();

elementCreator.prototype.createUserEntry = function (usr_num) {
    for (i = 0; i < usr_num; i++) {
        document.body.innerHTML += '<b>User #' + (i + 1) + ': </b><br>';
        this.usrList[i] = document.createElement("INPUT");
        this.usrList[i].setAttribute("type","text");
        document.body.appendChild(this.usrList[i]);

        document.body.appendChild(document.createElement("br"));
        document.body.appendChild(document.createElement("br"));
    }

    document.body.innerHTML += '<form onsubmit="elemCreator.printUsrs(usr_num); return false;">';
    document.body.innerHTML += '<input type="submit" value="Print User Names">';
    document.body.innerHTML += '</form>';
}

//Using this function below just to see whether or not the text values are being saved to the array
elementCreator.prototype.printUsrs = function (usr_num) {
    for (i = 0; i < usr_num; i++) {
        document.body.innerHTML += '<br>' + this.usrList[i].value;
    }
}

我当前的HTML GUI：

当前的HTML GUI有效，但底部的按钮无效。

Answer 1

这是一个使用jQuery的工作示例：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <style>
        html { font-family: Arial; }
        input.name { margin-bottom: 20px; }
        button { display: block; }
        h2 { margin: 0; }
    </style>
</head>

<body>
    <h3>Input # of users:</h3>
    <form id="user-form">
        <input type="text" id="number-of-users">
        <input type="submit" value="Submit">
    </form>

    <script>
        function createUserEntries(numberOfUsers) {
            for (var i = 0; i < numberOfUsers; i++) {
                $(document.body).append($('<h2>').text('User #' + (i + 1) + ': '));
                $(document.body).append($('<input>').attr('type', 'text').addClass('name'));
            }

            var button = $('<button>').text('Print User Names').click(function (e) {
                e.preventDefault();
                printUsers();
            });
            $(document.body).append(button);
        }

        function printUsers() {
            $('input.name').each(function () {
                $(document.body).append($('<p>').text($(this).val()));
            });
        }

        $(function () {
            $('#user-form').submit(function (e) {
                e.preventDefault();
                createUserEntries($('#number-of-users').val());
            });
        });
    </script>
</body>
</html>

Answer 2

我同意RobG。 我在jsbin中复制了您的代码以进行调查，并发现在添加提交按钮之前，表单元素会自行关闭。 因此，提交按钮实际上位于表单之外。

我通过在一行中添加表单和输入按钮来解决此问题。

为了跟踪动态生成的输入数量，我发现了一种使其工作的方法。 在生成输入时，我添加了一个类名。 然后onsubmit获取具有该类名的所有输入，并将其存储在数组中，并将所有值打印到屏幕上。

希望这会有所帮助，并且我不会对您的代码造成太大的伤害： https : //jsbin.com/loritaxoko/edit? html,css,js,output

Answer 3

innerHTML属性/方法不是DOM方法-人们似乎不了解这种差异-innerHTML是DHTML属性/方法。

使用innerHTML属性创建UI元素从来都不是完全安全的。 UI元素并非完全是html元素，它们是浏览器内置的控件，如果使用纯HTML在页面加载后将它们显示出来，则它们可能只是未完全初始化。

考虑使用DOM方法，例如createElement（“ UI Type”）和append...。

如何通过JavaScript中的按钮从动态创建的文本输入框中提取文本值？

问题描述

3 个解决方案

解决方案1
0 已采纳 2016-07-13 23:55:52

解决方案2
0 2016-07-13 23:56:12

解决方案3
0 2016-07-14 01:00:15

如何通过JavaScript中的按钮从动态创建的文本输入框中提取文本值？

问题描述

3 个解决方案

解决方案1 0 已采纳 2016-07-13 23:55:52

解决方案2 0 2016-07-13 23:56:12

解决方案3 0 2016-07-14 01:00:15

解决方案1
0 已采纳 2016-07-13 23:55:52

解决方案2
0 2016-07-13 23:56:12

解决方案3
0 2016-07-14 01:00:15